Greg Greg - 6 months ago 10
jQuery Question

Click to open only one at a time

I'm fairly new to JQuery, how do I make only one of the dropdown menus open at a time?

$("#vertical-menu span").click(function () {
//slide up all the link lists
var h3 = "#vertical-menu ul h3";

$("#vertical-menu ul ul").slideUp();
$('.plus',h3).html('+');
//slide down the link list below the h3 clicked - only if its closed
if (!$(h3).next().is(":visible")) {
$(h3).next().slideDown();
//$(this).remove("span").append('<span class="minus">-</span>');
$('.plus').html('+');
$('.plus',h3).html('-');
}
})


I only want it to show/drop down when I hit the plus or minus
http://jsfiddle.net/u3aufkg8/

Answer

You just need to actually use the closest <h3> element when you click so that you know which section to slide down. You can do this by using the closest() function after closing all of your current elements :

// Store your closest H3 element
var currentH3 = $(this).closest('h3');
// Use it to handle showing / hiding
if (!$(currentH3).next().is(":visible")) {
        // If this section hasn't been shown, then show it
        $(currentH3).next().slideDown();
        // Update the icon to reflect the current state
        $('.plus',currentH3).html('-');
}

So your complete function would look like this :

$("#vertical-menu span").click(function () {
    // slide up all the link lists
    var h3 = "#vertical-menu ul h3";
    $("#vertical-menu ul ul").slideUp();
    $('.plus',h3).html('+');
    var currentH3 = $(this).closest('h3');
    if (!$(currentH3).next().is(":visible")) {
        $(currentH3).next().slideDown();
        $('.plus',currentH3).html('-');
    }
});

Example

enter image description here

$("#vertical-menu span").click(function() {
  //slide up all the link lists
  var h3 = "#vertical-menu ul h3";
  $("#vertical-menu ul ul").slideUp();
  $('.plus', h3).html('+');
  //slide down the link list below the h3 clicked - only if its closed
  var currentH3 = $(this).closest('h3');
  if (!$(currentH3).next().is(":visible")) {
    $(currentH3).next().slideDown();
    $('.plus', currentH3).html('-');
  }
})
/*custom font for text*/
 @import url(http://fonts.googleapis.com/css?family=Nunito);

/*Basic reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    background: #4EB889;
    font-family: Nunito, arial, verdana;
}
#vertical-menu {
    background: #004050;
    width: 250px;
    margin: 100px auto 0 auto;
    color: white;
    /*box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);*/
}
/*heading styles*/
 #vertical-menu h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
 #vertical-menu h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
 #vertical-menu h3 span {
    font-size: 16px;
    margin-right: 10px;
}
/*list items*/
 #vertical-menu li {
    list-style-type: none;
}
/*links*/
 #vertical-menu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*hover effect on links*/
 #vertical-menu ul ul li a:hover {
    background: #003545;
    /*border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
 #vertical-menu ul ul {
    display: none;
}
#vertical-menu li.active ul {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vertical-menu">
  <ul>
    <li>
      <a href="#">Dashboard</a>

    </li>
    <!-- we will keep this LI open by default -->
    <li>

      <h3><span class="plus">+</span><a href="#">Tasks</a></h3>

      <ul>
        <li><a href="#">Today's tasks</a>
        </li>
        <li><a href="#">Urgent</a>
        </li>
        <li><a href="#">Overdues</a>
        </li>
        <li><a href="#">Recurring</a>
        </li>
        <li><a href="#">Settings</a>
        </li>
      </ul>
    </li>
    <li>
      <h3><span class="plus">+</span><a href="#">Favorites</a></h3>

      <ul>
        <li><a href="#">Global favs</a>
        </li>
        <li><a href="#">My favs</a>
        </li>
        <li><a href="#">Team favs</a>
        </li>
        <li><a href="#">Settings</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Comments