Develop Reference

Show hide element on same button click

I have the following sample code:
CODE HTML:
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>
CODE CSS:
.hidden {
display: none;
}
.visible {
display: block;
}
CODE JS:
$('.button').on('click', function (e) {
var item = $('.item');
item.removeClass('hidden');
});
I want to add class .visible to the elements that previously had the .hidden class. Basically I want to hide the items again at the next click and be a toggle of classes.
How can I hide the last two items?
Thanks in advance!

You need to use .toggle()
$('.button').on('click', function (e) {
$('.hidden').toggle('visible');
});

Try this, no need of css, just .toggle() will do it.
$('.button').on('click', function (e) {
$('.hidden').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>

Alternatively you can also use below approach:
CSS
.hidden {
display:none;
}
JQuery
$('.button').on('click', function (e) {
$('#anyElement').toggleClass('hidden');
});

You need to use switchClass to remove existing one and add second.

Alternatively, You can loop through each element on button click and remove/add the relevant classes.
$("button").click(function(){
$("li").each(function(){
let $this = $(this);
if($this.hasClass('hidden')){
$this.removeClass("hidden").addClass("visible");
} else if($this.hasClass('visible')){
$this.removeClass("visible").addClass("hidden");
}
})
})
.hidden {
display: none;
}
.visible {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item"> item 1 </li>
<li class="item hidden"> item 1 </li>
<li class="item hidden"> item 1 </li>
</ul>
<button class="button">Show/Hide element</button>

Jquery Counting child in nested list, Search and Expand Collapse

I am trying to develop expand collapse, search in nested list and count of child lists but I don't know how to implement all these.
HTML
<div class="searchSection">
<form action="#" novalidate="novalidate">
<input type="text" placeholder="search here...">
</form>
<ul id="orgCat">
<li parent-id="" li-id="1">
<div class="expandBtn"><span id="count"></span>India</div>
<ul>
<li parent-id="1" li-id="2">
<div class="expandBtn"><span id="count"></span>Ap</div>
<ul>
<li parent-id="2" li-id="7">
<div class="expandBtn"><span id="count"></span>vag</div>
</li>
<li parent-id="2" li-id="8">
<div class="expandBtn"><span id="count"></span>tirupati</div>
</li>
</ul>
</li>
<li parent-id="1" li-id="3">
<div class="expandBtn"><span id="count"></span>TN</div>
<ul>
<li parent-id="3" li-id="9">
<div class="expandBtn"><span id="count"></span>chena</div>
</li>
<li parent-id="3" li-id="10">
<div class="expandBtn"><span id="count"></span>India1</div>
</li>
<li parent-id="3" li-id="11">
<div class="expandBtn"><span id="count"></span>India2</div>
</li>
<li parent-id="3" li-id="12">
<div class="expandBtn"><span id="count"></span>India3</div>
</li>
<li parent-id="3" li-id="13">
<div class="expandBtn"><span id="count"></span>India4</div>
</li>
</ul>
</li>
<li parent-id="1" li-id="4">
<div class="expandBtn"><span id="count"></span>TS</div>
<ul>
<li parent-id="4" li-id="5">
<div class="expandBtn"><span id="count"></span>Hyd</div>
</li>
<li parent-id="4" li-id="6">
<div class="expandBtn"><span id="count"></span>warangal</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
When I click on the 'div' tag it should be expand or collapse. Count of children should be appear in 'span' tag. When I search an element, it should appear from it's root directory. I hope you guys understand.
JSFIDDLE
Jquery
// counting leafs
$('.searchSection').each(function(){
$('#count').text($('ul').children().length);
})
above jquery displaying total 'li' elements but i need to display number of li elements in each ul.
I don't know how to implement Collapse and Expand functionality. I am new to Jquery.

This code should give you the expand and colapse and count of all list items under a parent.
//Search query
$("input").keyup(function() {
var searchTerms = $(this).val();
$('li').each(function() {
var $li = $(this);
var hasMatch = searchTerms.length == 0 || $li.text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0;
$li.toggle(hasMatch);
if ($li.is(":hidden")) {
$li.closest("ul").show();
}
});
});
var $expandBtns = $(".expandBtn");
$expandBtns.each(function() {
var $span = $(this).find("span#count");
var $subList = $(this).siblings("ul").find("li")
$span.text($subList.length)
});
$expandBtns.on("click", function() {
var $subList = $(this).siblings("ul");
if ($subList.is(":visible")) {
$subList.hide();
} else {
$subList.show();
}
})

Trouble showing content with jQuery's .show()

I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>

Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>

You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>

You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle

jQuery how to selected the current list item in a nested list then hide all others

I have a menu that has 3 list options. Inside each of these list options there is another unordered list that has 2 list options inside.
Inside the unordered list with two options the first list item is an image and the second is a link.
When the user clicks one of the links, I want that current whole group(consisting of the image and the link) to stay showing while the other 2 menu options disappear.
I am having trouble coming up with the right selection.
$('.menu ul>li>ul>li:last-child>a').click(function() {
var currentLink = $(this);
var currentGroup = $(this).closest('li').closest('li');
$('.menu ul>li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link One</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Two</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li><div class="header"></div></li>
<li><img src="https://placehold.it/10x10.png"/>Link Three</li>
</ul>
</li>
</ul>
</div>

The problem is $('.menu ul>li') which selects all li including the second level one's.
So try
$('.menu ul ul li:last-child > a').click(function() {
var currentGroup = $(this).closest('.menu > ul > li');
$('.menu > ul > li').not(currentGroup).hide();
});
ul li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul class="main-menu">
<!--This is the first link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link One
</li>
</ul>
<!--This is the second link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Two
</li>
</ul>
</li>
<!--This is the third link group-->
<li>
<ul class="sub-menu">
<li>
<div class="header"></div>
</li>
<li>
<img src="https://placehold.it/10x10.png" />Link Three
</li>
</ul>
</li>
</ul>
</div>

how to make nested list in slide panel?

Can you please tell me how to make a nested list in slide panel in jQuery?
I am able to make a slide panel, but I want to make nested list in left panel in jQuery.
http://jsfiddle.net/qUMbC/31/
can we make nested list in slide panel ?
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth"> Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h2>Menu</h2>
<ul data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
<!-- submenu -->
</div>

Assuming you want the inner list to remain hidden until its parent is clicked, something like this might give you an idea:
HTML:
<ul id="myList" data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu1</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
CSS:
#myList ul {
display: none;
}
JavaScript:
$('#myList > li').click(function() {
var subList = $(this).children('ul');
if (subList.is(":hidden"))
subList.slideDown(200);
else
subList.slideUp(200);
});
JSFiddle demo