Collapsible menu in jquery - javascript

I have a side collapsible panel , on clicking the arrow icon the sub contents are hidden , and once hidden on clicking the arrow the sub contents are shown.
There is a jquery code for the slide down and slide up function , is there a way by default the sub contents are hidden and onclicking the arrow the sub content are shown or hidden accordingly?
The code is as
jQuery(function($) {
$('.active span.clickable').on("click", function(e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>

You need to add css if you want sub-menu by default hidden. Please follow the below code, it will done your job::
HTML
<li class="active">
Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
CSS
.collapsein{
display: none;
}
JQUERY
jQuery(function ($) {
$('.active a.clickable').on("click", function (e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
Working JSFiddle:: https://jsfiddle.net/80fpe9d9/

If you want your list to appear hidden by default it is only a simple adjustment. You would first set the css for it to display: none.
CSS
.collapsein {
display: none;
}
And also add the class panel-collapsed to your clickable span
HTML
Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
Working JSBin
Moved down arrow left for clarity.

Thanks for the answers!!!!
Had to add the css code for it to work properly
.collapsein{
display: none;
}

Use this Script code with Jquery
<script>
$(function(){
$("#accordian h3").click(function(){
$("#accordian ul ul").slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideDown();
}
});
});
</script>
call the accordian id in html like below:
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li>Sub menu1 </li>
<li>Sub menu2 </li>
<li>Sub menu3 </li>
<li>Sub menu4 </li>
</ul>
</li>
</div>
Here is the Reference and Demo

Related

Mobile navigation with sliding dropdown menu

i'm trying to create a seperate mobile navigation for a website i'm creating. this is the basic html layout right now
<nav class="mobile-navigation">
<ul class="header-mobile">
<li>
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<li>
<img src="{$WEB_ROOT}/templates/{$template}/img/logo/logo.svg" alt="logo">
</li>
<li>
<ul>
<li><span class="icon icon-nav-account"></span></li>
<li>
<a href="{$WEB_ROOT}/cart.php?a=view">
<span class="icon icon-cart"></span>
<span class="notification-amount">{$cartitemcount}</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="row">
<ul class="nav-mobile">
<li>About us</li>
<li>Services</li>
<li>Domains</li>
<li>Support</li>
</ul>
</div>
with a simple script to toggle the menu
$('.fa-bars').click(function(evt) {
$('.nav-mobile').slideToggle('down');
});
Now i'm trying to create something where if a list item is chosen, the dropdown is displayed like the images below.
first list -->
second list with selected item
anyone an idea how i achieve this?
First of all you should change your arrow's direction and position. or create two of them one on left and one on right then when user clicks on a li toggle class clicked or something else to that li element(if you want others to collapse you should remove clicked class). Then in css
li > ul{
display:none;
}
li .left-arrow{
display:none;
}
li.clicked > .left-arrow{
display:inline;
}
li.clicked > ul{
display: block;
}
should do the trick

I need javascript for to enable display on toggled list

I have a ul list that I added toggle to using Javascript
and set display to none using CSS and everything is working fine.
I am looking for the javacript to make the link display (not collapsed) on the next page
when the links under the parent menu is clicked. So they are collapsed by default but when any of the links
clicked and the page loads, the links would not be collapsed as it was initially when the page was first visited.
Here's my current markup
<ul>
<li>
Main Title
<ul>
<li>
link 1
</li>
<li>
link 2
</li>
<li>
link 3
</li>
</li>
</ul>
</ul>
<style>
ul li ul {
display: none;
}
</style>
<script>
$('li').click(function (e) {
$(this).children('ul').slideToggle();
e.stopPropagation();
});
</script>
JQuery Code
<script>
$(document).ready(function(){
$("#hideshow").hide(); //By Default li is hide
$("ul").click(function(){
$("#hideshow").slideToggle(1000);
});
});
</script>
HTML Code
<body>
<ul><li>Hide </li></ul>
<ul id="hideshow">
<li>link 1 </li>
<li> a href="#">link 2 </a></li>
<li>link 3 </li>
</ul>
</body>

avoid closing the menu if submenu items is clicked

This is a multilevel menu. When i click the link "About" it opens the submenu which contains 3 links Johnny, Julie & Jamie.
When i click "About" again, it closes the menu. Clicking the submenu also closes the menu, and that i want to avoid.
How do i avoid closing the opened submenu, if i click the submenu (Johnny, Julie & Jamie) ?
$('li.parent').click(function() {
$(this).find('.sub-nav').toggleClass('visible');
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">About
<ul class="sub-nav">
<li>Johnny
</li>
<li>Julie
</li>
<li>Jamie
</li>
</ul>
</li>
<li class="parent">AnotherLink
<ul class="sub-nav">
<li>Martin
</li>
<li>Rasmus
</li>
<li>Morten
</li>
</ul>
</li>
</ul>
Alternative to stopPropagation approach for child elements would be adding a small check if the clicked element is the current one (and not it's descendants):
$('li.parent').click(function(e) {
if (this === e.target)
$(this).find('.sub-nav').toggleClass('visible');
});
$('li.parent').click(function(e) {
if (this === e.target)
$(this).find('.sub-nav').toggleClass('visible');
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">About
<ul class="sub-nav">
<li>Johnny
</li>
<li>Julie
</li>
<li>Jamie
</li>
</ul>
</li>
<li class="parent">AnotherLink
<ul class="sub-nav">
<li>Martin
</li>
<li>Rasmus
</li>
<li>Morten
</li>
</ul>
</li>
</ul>
You need to stopPropagation of event on child anchor elements:
$("li.parent a").click(function(e) {
e.stopPropagation();
});
You need to prevent the click on the .sub-nav element to be transmitted to your event handler: https://api.jquery.com/event.stoppropagation/

JQuery click function not firing off

The problem I am running into is that I have this responsive navigation built. I only want it to dropdown when the hamburger icon is clicked, but it will not work if I try targeting it. It only works if I target the entire navbar it is nested in.
Here is a link to a local jsFiddle here
HTML Code
<div class="toggleMenu">
<button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>
<nav class="level-nav hidden-md">
<ul>
<li>About Me</li>
<li>Pulses</li>
<li>Kudos</li>
<li>Blogs</li>
<li>
Resources <b class="caret"></b>
<div class="level-inner">
<span class="split"></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</li>
</ul>
</nav>
JQuery Code
$(document).ready(function(){
var mobileMenu = $(".level-nav li a");
$(mobileMenu).each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
/* Defined variables for main and sub multi-level navigations */
var subNav = $("#toggle-btn");
/* Function that activates the sub-navigation bar to toggle the sibiling which is the .level-nav */
$(subNav).click(function (e){
e.preventDefault();
$(this).siblings(".level-nav").toggle(175, "easeInQuad");
});
});
The button is not a sibling of the navigation, it's wrapped in a DIV that is a sibling of the navigation
$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");
And to use toggle() like that, you'll have to include jQuery UI as well
FIDDLE

Stopping a SlideUp When link is clicked

So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.
My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?
My Menu:
<ul id="menu-top" class="menu">
<li class="has-submenu">
Portfolio
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Book I
</li>
</ul>
</li>
<li class="has-submenu">
Headshots
<ul class="sub-menu" style="display: none;">
<li class="menu-item">
Men
</li>
</ul>
</li>
<li class="regular-link">
Personal Work
</li>
</ul>
JS:
jQuery('#menu-top').children().click(function(e){
var $next = jQuery(this).find('.sub-menu');
var $child =('.active-menu');
$next.stop().slideToggle('slow').toggleClass('active-menu');
jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');
});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});
Use stopPropagation to prevent the event from bubbling.
jQuery('.submenu a').click(function(e){
e.stopPropagation();
});
To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.
$(".shop-by-dept ul li a").click(function(e){
e.stopPropagation();
});
This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.

Categories

Resources