In general, my code (below) works. But: If you click at first "Link 1", and then for example "Link 2", only the content for Link 2 should be visible.
How is it possible to code that?
$("li").click(function() {
$($(this).data("target")).toggle();
// hide all other content areas
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Would be very thankful for help! <3
If you're looking to keep the ability to toggle the one you clicked, you can use
var target = $($(this).data("target"));
$(".content").not(target);
target.toggle();
to find all the content divs except the target one.
If you just want to show the clicked one then you can hide all the others, (as provided in the other answer).
Updated snippet:
$("li").click(function() {
var target = $($(this).data("target"));
$(".content").not(target).hide();
target.toggle();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
You're targetting a single <div> each time... there's nothing in your code to "reset" the other ones.
Try this, which first hides all the <div> elements, and then shows your selected one...
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Note, if you need the content to disappear if you click the <li> a second time, this will not work, as it will always show the item you've clicked.
If you need it to disappear, see the answer by freedomn-m
Related
I have a list of items like
<ul>
<li draggable="true">item 1</li>
<li draggable="true">item 2</li>
<li draggable="true">item 3</li>
</ul>
and a container div with divisions as child like
<div class="container" ondrop="drop(event)">
<div class="row">
<div class="child-row">
</div>
</div>
</div>
How can i trigger an event or just call an alert when any of the list item is dragged and dropped inside any of the child div inside the container class? Can anyone help me?
EDIT: My script is
function drop(event) {
alert();
}
For the drop event to occur on a div element, you must cancel both the dragenter and dragover events using event.preventDefault(), according to the MDN page:
If you want to allow a drop, you must prevent the default handling by cancelling the event. You can do this either by returning false from an attribute-defined event listener, or by calling the event's preventDefault() method ... Calling the preventDefault() method during both a dragenter and dragover event will indicate that a drop is allowed at that location.
You can do this by querying your container using document.querySelector('.container') and then attach the proper event listners with target.addEventListener(), or attach them directly in the HTML.
You only need to do this for the parent container and it will work for the children too.
function drop(event) {
const item = event.dataTransfer.getData('text');
const target = event.target.querySelector('.target');
if (target) {
target.textContent = `${target.textContent}${target.textContent && ','} ${item}`;
}
}
function drag(event) {
event.dataTransfer.setData('text', event.target.textContent);
}
function cancel(event) {
event.preventDefault();
}
ul {
display: inline-block;
margin-right: 20px;
}
.container {
display: inline-block;
border: 1px solid black;
padding: 10px;
min-width: 200px;
}
.row {
border: 1px solid black;
background: #eee;
padding: 10px;
}
.child-row {
border: 1px solid black;
background: #ddd;
padding: 10px;
}
.target {
background: #0ff;
}
<p>Drag the list items in the rectangles:</p>
<ul>
<li draggable="true" ondragstart="drag(event)">item 1</li>
<li draggable="true" ondragstart="drag(event)">item 2</li>
<li draggable="true" ondragstart="drag(event)">item 3</li>
</ul>
<div class="container" ondrop="drop(event)" ondragenter="cancel(event)" ondragover="cancel(event)">
Container <span class="target"></span>
<div class="row">
Row <span class="target"></span>
<div class="child-row">
Child Row <span class="target"></span>
</div>
</div>
</div>
This should work
<div class="container">
<div class="row">
<div class="child-row" onDragOver={(e) => e.preventDefault()} onDrop={(e) => {console.log(e, 'inside');}}>
</div>
</div>
</div>
<ul>
<li draggable="true">item 1</li>
<li draggable="true">item 2</li>
<li draggable="true">item 3</li>
</ul>
Give the child div a height and width to identify the dropevent
.child-row{
height: 51px;
width: 147px;
border: 1px solid;
}
I think you want something like below -
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
//console.log(data)
}
.container .child-row{
width: 150px;
height: 70px;
border: 1px solid #000;
}
ul{
width: 150px;
height: 70px;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul ondrop="drop(event)" ondragover="allowDrop(event)">
<li id="item1" ondragstart="dragStart(event)" draggable="true">item 1</li>
<li id="item2" ondragstart="dragStart(event)" draggable="true">item 2</li>
<li id="item3" ondragstart="dragStart(event)" draggable="true">item 3</li>
</ul>
<div class="container" ondrop="drop(event)">
<div class="row">
<div class="child-row" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
</div>
I did the "expand/collapse all" function, everything is working well, except the arrow. It doesn't pointing to the correct direction. I'm not sure how to do that, so I leave it empty on my code. My issue is shown below.
(Red box represents the click action)
Click "View all", can see the expanders are opened. The arrows pointing down.
Click "A" to collapse the expander, and the arrow pointing up.
Click "Collapse all", the expanders are collpased. Now you can see my problem, "A" arrow is pointing up and the rest are pointing down.
Hoping that some of you could provide me with some advice. Thanks!
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
Just add $('.mobexpand').addClass('collapsed'); ($(".expandall").click) in show all function
and $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) and in collsapse all function as bellow
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
$('.mobexpand').removeClass('collapsed');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
$('.mobexpand').addClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
I have made a single page which has a navbar and with links pointing to section id in the page.
However, when I click on the link the section of the page scrolls down till the top of the section and due to my sticky navbar, the top part of my section goes behind it.
How do I create an offset height which would match my navbar height so that the div is visible at the right position?
Here is my a screenshot of what is happening.
Also, is there a way to smoothly scroll till the section? What is the easiest method to achieve this?
My example code:
HTML:
<nav>
<ul>
<li>Section 1</li>
<li>Sction 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
Offsetting anchor hash tag links to adjust for fixed header
HTML :
Goto Section I
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
CSS:
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
Give padding-top to that section which is equal to the header height. Like if your header has a height: 40px then give padding-top: 40px to that section.
Have a look at the snippet below:
body {
margin: 0;
padding-top: 50px;
}
nav {
background: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 15px;
}
.sec {
height: 200px;
margin-bottom: 30px;
background: #ff0;
padding-top: 48px;
}
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div>
Hope this helps!
I trying to apply Tab concept to my web page.e.g for tab names are Monday...Tue.. upto sunday. each tab are contains one image file based on the days (size 460*620).when i run my page it shows all images, what i need is as per the tab image will be display. but here shows all images.
HTML:
<!--tab code-->
<div class="tabs" style="margin-top:100px;">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1"> <img src="order/Order/image/daily_buffet/40820-sunday.png"/></div>
<div id="item2"> <img src="order/Order/image/daily_buffet/50557-tuesday.png"/></div>
<div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
</div>
</div>
<!--end of tab code-->
CSS:
<!--tab code-->
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
<!--end of tab code-->
Try this, its working for me. Have you included Jquery into your project? check that once or update the hosted URL.
html
<!--tab code-->
<div class="tabs" style="margin-top:100px;">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/></div>
<div id="item2"> <img src="http://sites_jupiterbase2.jumbowp.com/wp-content/uploads/2014/08/thumbnail-placeholder-Copy.jpg"/></div>
<div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
</div>
</div>
<!--end of tab code-->
https://jsfiddle.net/hpx0ymcL/1/
Complete js newbie here, so sorry if im asking a stupid question :)
I have a navigation that toggles several divs, each link opens its own div, like this:
<div class="drawer" id="link1" style="display: none">First link content</div>
<div class="drawer" id="link2" style="display: none">Second link content</div>
<div class="drawer" id="link3" style="display: none">Third link content</div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>External link</li>
</ul>
</nav>
And the code that runs it:
$(document).ready(function () {
$('.menu').click(function () {
var $clicked = $(this)
$('.menu').each(function () {
var $menu = $(this);
if (!$menu.is($clicked)) {
$($menu.attr('data-item')).hide();
}
});
$($clicked.attr('data-item')).toggle();
});
});
It works well, but instead of simple showing/disappearing, i would wish to have slide up/down toggle effect on the divs when they are triggered.
I know there are slideUp and slideDown effects, but like i said, i am very new to all this and i cant make it work.
Fiddle is at http://jsfiddle.net/15kene5v/ and if anybody can help, that would be great.
Use slideUp and slideToggle instead of hide and toggle.
Updated Fiddle
$(document).ready(function() {
$('.menu').click(function() {
var $clicked = $(this)
$('.menu').each(function() {
var $menu = $(this);
if (!$menu.is($clicked)) {
// Use slideUp here
$($menu.attr('data-item')).slideUp('slow');
}
});
// Use sildeToggle here
$($clicked.attr('data-item')).slideToggle('slow');
});
});
nav ul {
margin: 0;
padding: 0;
background-color: #6DB4F3;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.drawer {
height: 100px;
background-color: darkorange;
color: white;
text-align: center;
position: relative;
}
.drawer:after {
content: 'close';
left: 0;
top: 0;
position: absolute;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="drawer" id="link1" style="display: none">First link content</div>
<div class="drawer" id="link2" style="display: none">Second link content</div>
<div class="drawer" id="link3" style="display: none">Third link content</div>
<nav>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>External link
</li>
</ul>
</nav>
<div style="display:block">Content that gets pushed down</div>