Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Display/hide Sub List Items In JQuery

Post a Comment
I have this list Items to show. I want to open A onclick and if I click B it opens B and closes automatically A. Now close the sub-menu just manually onclick if it's already opened

Solution 1:

Demo

$(document).ready(function(){   
    $('ul li.expanded > a')
    .attr('data-active','0')
    .click(function(event){
       $('.submuneu').hide();    
        if($(this).attr('data-active')==0){
            $(this).parent().find('ul').slideToggle('slow');
            $(this).attr('data-active','1');
        }
        else
          $(this).attr('data-active','0');        
    });
        $('a.on').click(function(){
        $('a.on').removeClass("active");
        $(this).addClass("active");
    });

});

Solution 2:

A better way ...

So I gave an answer to another question that referred to this old answer. I find a few things wrong with this answer. For one thing, it's a bit long and convoluted. There's really no need for all the data and class checks and changes, unless you simply want to add/toggle class/data for sake of later use. Secondly, it's "laggy" looking. It jumps up and down on changes.

The following is clear plain, simple, smooth, and works on multiple levels of menu as long as they follow the basic HTML mark up of UL>LI>A+UL>LI. The latter part can be easily changed by simply changing the selectors in the following code.

The simple code:

$(function() {
    $(document).on('click', 'li a', function(e) {
        e.preventDefault();
        $(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
        $(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
    });
    $('li').each(function(i) { if ($(this).children('ul').length) $(this).css({ cursor: 'pointer' }); });
})

Full Fluid Example: 

//	simply jQuery shorthand for document.ready = function() { ...
$(function() {
	//	the following is how to add events so that they work for even "dynamically" created elements. 
	//	That is, elements created after code/page load.
	$(document).on('click', 'li a', function(e) {
		e.preventDefault();	//	ensure it doesn't try to follow a link
		//	close all possible siblings and cousins
		$(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
		//	slide toggle current possible sub menu
		//  and close any children if no longer visible
		$(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
	});
	//	uncomment the following line to ensure all sublist are closed, 
	//	however, i strongly recommend this should be done using css
	//	$('ul ul').hide();
	//	change cursor for li elements having a sub menu
	$('li').each(function(i) {
		if ($(this).children('ul').length) {	//	test if it has a submenu
			$(this).css({ cursor: 'pointer' });
			
			//	just for this test, i'm going to add a background color to A tags on li's having a submenu
			//  and a little text to make it more obvious
			var cntSubMenus = $(this).children('ul').find('li > ul').length,
				txt = !cntSubMenus ? ' - is a SubMenu Header' : (' - has ['+cntSubMenus+'] subMenu' + (cntSubMenus > 1 ? "s" : ""));
			$(this).addClass('level-' + $(this).parents('li').length)
			  .children('a').append(txt);
		}
	});
})
/*  this simply hides all submenus outright  */
ul ul { display: none; }

/*  used just for visual aid  */
li { margin: .25em auto; }
li a { padding: .1em .25em; }
.level-0 > a, .level-8 > a { background-color: #1B00F8; color: #FFF; }
.level-1 > a, .level-9 > a { background-color: #f8f800; }
.level-2 > a, .level-10 > a { background-color: #C7FFFF; }
.level-3 > a, .level-11 > a { background-color: #C7FFCB; }
.level-4 > a, .level-12 > a { background-color: #E2C7FF; }
.level-5 > a, .level-13 > a { background-color: #FFC7C7; }
.level-6 > a, .level-14 > a { background-color: #C7FFED; }
.level-7 > a, .level-15 > a { background-color: #F9FFC7; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="leftsidebar_templ1">
	<ul id="nav">
		<li class="expanded"><a class="on">Form a Compalny</a>
				<ul class="submuneu">
					<li><a>United Kingdom (UK)</a></li>
					<li><a>United States of America (USA)</a></li>
					<li><a>Classic Offshore</a></li>
					<li><a>Alternative offshore Companies</a></li>
				</ul>
		</li>
		<li class="expanded"><a class="on">Office and address services</a>
				<ul class="submuneu">
					<li><a>Lorem Ipsum is simply</a></li>
					<li><a>Contrary to popular belief</a>
						<ul id="nav">
							<li class="expanded"><a class="on">Form a Compalny</a>
									<ul class="submuneu">
										<li><a>United Kingdom (UK)</a></li>
										<li><a>United States of America (USA)</a></li>
										<li><a>Classic Offshore</a></li>
										<li><a>Alternative offshore Companies</a></li>
									</ul>
							</li>
							<li class="expanded"><a class="on">Office and address services</a>
									<ul class="submuneu">
										<li><a>Lorem Ipsum is simply</a></li>
										<li><a>Contrary to popular belief</a></li>
										<li><a>The standard chunk</a></li>
										<li><a>There are many variations</a></li>
									</ul>
							</li>
							<li class="expanded"><a class="on">Nominee Services</a>
									<ul class="submuneu">
										<li><a>Lorem Ipsum is simply</a></li>
										<li><a>Contrary to popular belief</a></li>
										<li><a>The standard chunk</a></li>
										<li><a>There are many variations</a></li>
									</ul>
							</li>
						</ul>
					</li>
					<li><a>The standard chunk</a>
						<ul id="nav">
							<li class="expanded"><a class="on">Corporate Banking</a>
									<ul class="submuneu">
										<li><a>Lorem Ipsum is simply</a></li>
										<li><a>Contrary to popular belief</a>
											<ul id="nav">
												<li class="expanded"><a class="on">Form a Compalny</a>
														<ul class="submuneu">
															<li><a>United Kingdom (UK)</a></li>
															<li><a>United States of America (USA)</a></li>
															<li><a>Classic Offshore</a></li>
															<li><a>Alternative offshore Companies</a></li>
														</ul>
												</li>
												<li class="expanded"><a class="on">Office and address services</a>
														<ul class="submuneu">
															<li><a>Lorem Ipsum is simply</a></li>
															<li><a>Contrary to popular belief</a>
																<ul id="nav">
																	<li class="expanded"><a class="on">Office and address services</a>
																			<ul class="submuneu">
																				<li><a>Lorem Ipsum is simply</a></li>
																				<li><a>Contrary to popular belief</a></li>
																				<li><a>The standard chunk</a></li>
																				<li><a>There are many variations</a></li>
																			</ul>
																	</li>
																	<li class="expanded"><a class="on">Nominee Services</a>
																			<ul class="submuneu">
																				<li><a>Lorem Ipsum is simply</a></li>
																				<li><a>Contrary to popular belief</a></li>
																				<li><a>The standard chunk</a></li>
																				<li><a>There are many variations</a></li>
																			</ul>
																	</li>
																</ul>
															</li>
															<li><a>The standard chunk</a></li>
															<li><a>There are many variations</a></li>
														</ul>
												</li>
											</ul>
										</li>
										<li><a>The standard chunk</a></li>
										<li><a>There are many variations</a></li>
									</ul>
							</li>
							<li class="expanded"><a>Accountancy and Audit</a>
								<ul class="submuneu">
									<li><a>United Kingdom (UK)</a></li>
									<li><a>United States of America (USA)</a></li>
									<li><a>Classic Offshore</a></li>
									<li><a>Alternative offshore Companies</a></li>
								</ul>
							</li>
							<li class="expanded"><a>Name protection services</a>
								<ul class="submuneu">
									<li><a>Lorem Ipsum is simply</a></li>
									<li><a>Contrary to popular belief</a></li>
									<li><a>The standard chunk</a></li>
									<li><a>There are many variations</a></li>
								</ul>
							</li>
							<li class="expanded"><a>Making changes to a company</a></li>
						</ul>
					</li>
					<li><a>There are many variations</a></li>
				</ul>
		</li>
		<li class="expanded"><a class="on">Nominee Services</a>
				<ul class="submuneu">
					<li><a>Lorem Ipsum is simply</a></li>
					<li><a>Contrary to popular belief</a></li>
					<li><a>The standard chunk</a></li>
					<li><a>There are many variations</a></li>
				</ul>
		</li>
		<li class="expanded"><a class="on">Corporate Banking</a>
				<ul class="submuneu">
					<li><a>Lorem Ipsum is simply</a>
						<ul id="nav">
							<li class="expanded"><a class="on">Form a Compalny</a>
									<ul class="submuneu">
										<li><a>United Kingdom (UK)</a></li>
										<li><a>United States of America (USA)</a></li>
										<li><a>Classic Offshore</a></li>
										<li><a>Alternative offshore Companies</a></li>
									</ul>
							</li>
							<li class="expanded"><a>Accountancy and Audit</a>
								<ul class="submuneu">
									<li><a>United Kingdom (UK)</a></li>
									<li><a>United States of America (USA)</a></li>
									<li><a>Classic Offshore</a>
										<ul id="nav">
											<li class="expanded"><a class="on">Form a Compalny</a>
													<ul class="submuneu">
														<li><a>United Kingdom (UK)</a></li>
														<li><a>United States of America (USA)</a></li>
														<li><a>Classic Offshore</a>
															<ul id="nav">
																<li class="expanded"><a class="on">Office and address services</a>
																		<ul class="submuneu">
																			<li><a>Lorem Ipsum is simply</a></li>
																			<li><a>Contrary to popular belief</a></li>
																			<li><a>The standard chunk</a></li>
																			<li><a>There are many variations</a></li>
																		</ul>
																</li>
																<li class="expanded"><a class="on">Nominee Services</a>
																		<ul class="submuneu">
																			<li><a>Lorem Ipsum is simply</a>
																				<ul id="nav">
																					<li class="expanded"><a class="on">Office and address services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a></li>
																								<li><a>Contrary to popular belief</a></li>
																								<li><a>The standard chunk</a></li>
																								<li><a>There are many variations</a></li>
																							</ul>
																					</li>
																					<li class="expanded"><a class="on">Nominee Services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a></li>
																								<li><a>Contrary to popular belief</a></li>
																								<li><a>The standard chunk</a></li>
																								<li><a>There are many variations</a></li>
																							</ul>
																					</li>
																				</ul>
																			</li>
																			<li><a>Contrary to popular belief</a>
																				<ul id="nav">
																					<li class="expanded"><a class="on">Office and address services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a>
																									<ul id="nav">
																										<li class="expanded"><a class="on">Office and address services</a>
																												<ul class="submuneu">
																													<li><a>Lorem Ipsum is simply</a></li>
																													<li><a>Contrary to popular belief</a></li>
																													<li><a>The standard chunk</a></li>
																													<li><a>There are many variations</a></li>
																												</ul>
																										</li>
																										<li class="expanded"><a class="on">Nominee Services</a>
																												<ul class="submuneu">
																													<li><a>Lorem Ipsum is simply</a></li>
																													<li><a>Contrary to popular belief</a></li>
																													<li><a>The standard chunk</a></li>
																													<li><a>There are many variations</a></li>
																												</ul>
																										</li>
																									</ul>
																								</li>
																								<li><a>Contrary to popular belief</a></li>
																								<li><a>The standard chunk</a></li>
																								<li><a>There are many variations</a></li>
																							</ul>
																					</li>
																					<li class="expanded"><a class="on">Nominee Services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a></li>
																								<li><a>Contrary to popular belief</a></li>
																								<li><a>The standard chunk</a></li>
																								<li><a>There are many variations</a></li>
																							</ul>
																					</li>
																				</ul>
																			</li>
																			<li><a>The standard chunk</a>
																				<ul id="nav">
																					<li class="expanded"><a class="on">Office and address services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a></li>
																								<li><a>Contrary to popular belief</a></li>
																								<li><a>The standard chunk</a></li>
																								<li><a>There are many variations</a></li>
																							</ul>
																					</li>
																					<li class="expanded"><a class="on">Nominee Services</a>
																							<ul class="submuneu">
																								<li><a>Lorem Ipsum is simply</a></li>
																								<li><a>Contrary to popular belief</a></li>
																								<li><a>The standard chunk</a></li>
																								<li><a>There are many variations</a></li>
																							</ul>
																					</li>
																				</ul>
																			</li>
																			<li><a>There are many variations</a></li>
																		</ul>
																</li>
															</ul>
														</li>
														<li><a>Alternative offshore Companies</a></li>
													</ul>
											</li>
											<li class="expanded"><a class="on">Office and address services</a>
													<ul class="submuneu">
														<li><a>Lorem Ipsum is simply</a></li>
														<li><a>Contrary to popular belief</a></li>
														<li><a>The standard chunk</a></li>
														<li><a>There are many variations</a></li>
													</ul>
											</li>
											<li class="expanded"><a>Making changes to a company</a></li>
										</ul>
									</li>
									<li><a>Alternative offshore Companies</a></li>
								</ul>
							</li>
							<li class="expanded"><a>Name protection services</a>
								<ul class="submuneu">
									<li><a>Lorem Ipsum is simply</a></li>
									<li><a>Contrary to popular belief</a></li>
									<li><a>The standard chunk</a></li>
									<li><a>There are many variations</a></li>
								</ul>
							</li>
							<li class="expanded"><a>Making changes to a company</a></li>
						</ul>
					</li>
					<li><a>Contrary to popular belief</a></li>
					<li><a>The standard chunk</a></li>
					<li><a>There are many variations</a></li>
				</ul>
		</li>
		<li class="expanded"><a>Accountancy and Audit</a>
			<ul class="submuneu">
				<li><a>United Kingdom (UK)</a></li>
				<li><a>United States of America (USA)</a></li>
				<li><a>Classic Offshore</a></li>
				<li><a>Alternative offshore Companies</a></li>
			</ul>
		</li>
		<li class="expanded"><a>Name protection services</a>
			<ul class="submuneu">
				<li><a>Lorem Ipsum is simply</a></li>
				<li><a>Contrary to popular belief</a></li>
				<li><a>The standard chunk</a></li>
				<li><a>There are many variations</a></li>
			</ul>
		</li>
		<li class="expanded"><a>Making changes to a company</a></li>
	</ul>
</div>

Solution 3: 

<script>
$(document).ready(function(){
    $('ul li.expanded > a').click(function(event){
        $(this).closest(".expanded").find('ul').slideToggle('slow');
    });
        $('a.on').click(function(){
        $('a.on').removeClass("active");
        $(this).addClass("active");
    });

});
</script>

Post a Comment for "Display/hide Sub List Items In JQuery"