CODEWITHSUNDEEP
jqueryhtmlcss
Michi
Michi

Reputation: 5471

jquery slideToggle does not go back to original settings

I developed the following simple jQuery menu:

$(document).ready(function () {
    $(".button, .button_menu_01").on('click', function () {
        $(this).next('.panel').slideToggle(500);
        $(this).toggleClass('active');
    });
});
.button {
     width: 50px;
     height: 50px;
     float: right;
     background-color: fuchsia;
}

.panel { 
     width: 100%;
     padding-left: 0%;
     font-weight: bold;
     overflow: hidden;
     display:none;
}

.button_menu_01 {
     padding-left: 1%;
     background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="button">Menu</div>
<div class="panel">	
    <div class="button_menu_01">1.0 Main Menu</div>
    <div class="panel">
        <div>1.1 Sub Menu</div>	
        <div class="button_menu_01">1.2 Sub Menu</div>
        <div class="panel">
            <div> 1.2.1 Sub Menu</div>
            <div> 1.2.2 Sub Menu</div> 	
        </div>
    </div>
</div>

You can also find the jsfiddle here.
All of this works fine so far.

Now when I drill through the menu till 1.2.1 Sub Menu and 1.2.2 Sub Menu and after that I click on the main menu .button the entire menu collapses. Now I click again on the main menu .button and the entire menu expands including all Sub Menus.

My target is that once the main menu .button is pressed to collapse the entire menu that it goes back to its original settings so once you click again it only displays 1.0 Main Menu like it does when you click it for the first time.

What do I have to change in my code to achive this?

Upvotes: 0

Views: 42

Answers (2)

Pooja Roy
Pooja Roy

Reputation: 545

$(document).ready(function ()
{
	$(".button").on('click', function ()
		{
			$(this).next('.panel').slideToggle(500);
			$(this).next('.panel').find('.panel').slideUp(500);
			$(this).toggleClass('active');
		});
	$(".button_menu_01").on('click', function ()
		{
			$(this).next('.panel').slideToggle(500);
			$(this).toggleClass('active');
		});
});
.button {
	width: 50px;
	height: 50px;
	float: right;
	background-color: fuchsia;
}

.panel{
	width: 100%;
	padding-left: 0%;
	font-weight: bold;
	overflow: hidden;
	display: none;
}

.button_menu_01 {
	padding-left: 1%;
	background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div class="button">
	Menu
</div>
<div class="panel">
	<div class="button_menu_01">
		1.0 Main Menu
	</div>
	<div class="panel sub">
		<div>
			1.1 Sub Menu
		</div>
	</div>
	<div class="button_menu_01">
		1.2 Sub Menu
	</div>
	<div class="panel sub">
		<div>
			1.2.1 Sub Menu
		</div>
		<div>
			1.2.2 Sub Menu
		</div>
	</div>
</div>

Replace Your Code with this one

Hope it will work for you

Upvotes: 0

Jeto
Jeto

Reputation: 14927

You need to adjust your code to do slightly different things depending on whether your panel is currently active or inactive:

$(document).ready(function() {
  $(".button, .button_menu_01").on('click', function() {
    // Grab the associated panel
    var $panel = $(this).next('.panel');

    // If it's visible, hide it as well as all its subpanels
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } 
    // Otherwise, simply show it
    else {
      $panel.slideDown(500).addClass('active');
    }
  });
});
.button {
  width: 50px;
  height: 50px;
  float: right;
  background-color: fuchsia;
}

.panel {
  width: 100%;
  padding-left: 0%;
  font-weight: bold;
  overflow: hidden;
  display: none;
}

.button_menu_01 {
  padding-left: 1%;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="button">Menu</div>
<div class="panel">

  <div class="button_menu_01">1.0 Main Menu</div>
  <div class="panel">

    <div>1.1 Sub Menu</div>

    <div class="button_menu_01">1.2 Sub Menu</div>
    <div class="panel">

      <div> 1.2.1 Sub Menu</div>
      <div> 1.2.2 Sub Menu</div>

    </div>

  </div>

</div>

Upvotes: 3

Related Questions