javascript - Collapsible menu in jquery - Stack Overflow

admin管理员组

文章数量:1357112

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=".1.1/jquery.min.js"></script>
<li class="active">
  <a href="#">Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span></a>
  <ul class="collapsein ">
    <li><label>Sub Data1</label></li>
    <li><label>Sub Data2</label></li>
    <li><label>Sub Data3</label></li>
  </ul>
</li>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
  <a href="#">Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span></a>
  <ul class="collapsein ">
    <li><label>Sub Data1</label></li>
    <li><label>Sub Data2</label></li>
    <li><label>Sub Data3</label></li>
  </ul>
</li>

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 16, 2017 at 11:13 shubham agrawal 3,55188 gold badges2222 silver badges3131 bronze badges asked Mar 16, 2017 at 10:34 random_geekrandom_geek 37522 gold badges88 silver badges2424 bronze badges 2

• stackoverflow./questions/10310717/… – ani_css Commented Mar 16, 2017 at 10:39
• If you need to have the suybmenu hidden at first, then you need to hide it in CSS first: . collapsein { display: none; } – Manuel Cheța Commented Mar 16, 2017 at 10:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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">
    <a href="#" class="clickable panel-collapsed">Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
    <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/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

<a href="#">Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span></a>

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><a href="#">Sub menu1</a> </li> 
<li><a href="#">Sub menu2</a> </li> 
<li><a href="#">Sub menu3</a> </li> 
<li><a href="#">Sub menu4</a> </li> 
</ul> 
</li>
</div>

Here is the Reference and Demo

本文标签： javascriptCollapsible menu in jqueryStack Overflow