CODEWITHSUNDEEP
jquery
Nazmul
Nazmul

Reputation: 115

Hide and show parents and child menubar

I am trying to making a menubar. When someone clicks on parent li ( showul) i want to slidedown child li (hideul). and again when someone clicks on another parent li, it should open the respective child li as well as hide all the previously opened li. check my jsfiddle for better understanding. Kindly help. I am learning jQUery.

<ul>   
  <li><a href="#" id="update" class="showul">Update Pages</a>
    <ul class="hideul">
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </li>
  <li><a href="#" id="category" class="showul">Category Option</a>
    <ul class="hideul">
      <li>Add Category</li>
      <li>Category List</li>
    </ul>
  </li>
  <li><a href="#" id="postoption" class="showul">Post Option</a>
    <ul class="hideul">
     <li>Add Post</li>
     <li>Post List</li>
    </ul>
   </li>
 </ul>


$(document).ready( function() {
    $(".showul").click(function(){
        $(".hideul").slideToggle("slow");
    });
});

Upvotes: 0

Views: 165

Answers (5)

JProttung
JProttung

Reputation: 1

There are two steps you have to go through.

  1. Hiding all the previously opened blocks
  2. Showing the wanted block

$(document).ready( function() {
  $(".showul").click(function(){
    $(".hideul").slideUp("slow");
    $(this).parent().find(".hideul").slideToggle("slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>   
  <li><a href="#" id="update" class="showul">Update Pages</a>
    <ul class="hideul">
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </li>
  <li><a href="#" id="category" class="showul">Category Option</a>
    <ul class="hideul">
      <li>Add Category</li>
      <li>Category List</li>
    </ul>
  </li>
  <li><a href="#" id="postoption" class="showul">Post Option</a>
    <ul class="hideul">
     <li>Add Post</li>
     <li>Post List</li>
    </ul>
   </li>
 </ul>

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

You need to use a combination of slideUp() - to hide others and slideToggle() - to toggle state of current elements.

Also, use :visible selector to further reduce results from the query.

$(".showul").click(function(){
    var $currEl = $(this).next('.hideul');
    $(".hideul:visible").not($currEl).slideUp("slow");
    $currEl.slideToggle("slow");
});

Updated Fiddle

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly you need to use siblings() to find the ul related to the current a. Then to hide all the other ul while toggling the current one, you can use this:

$(".showul").click(function() {
    var $hideUl = $(this).siblings(".hideul");
    var show = !$hideUl.is(':visible');
    $('.hideul').slideUp('slow');
    if (show)
        $hideUl.slideToggle('slow');
});

Update fiddle

Upvotes: 1

guradio
guradio

Reputation: 15555

$(document).ready( function() {
  $(".showul").click(function(){
  $(this).parent().find(".hideul").slideToggle("slow");
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>   
  <li><a href="#" id="update" class="showul">Update Pages</a>
    <ul class="hideul">
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </li>
  <li><a href="#" id="category" class="showul">Category Option</a>
    <ul class="hideul">
      <li>Add Category</li>
      <li>Category List</li>
    </ul>
  </li>
  <li><a href="#" id="postoption" class="showul">Post Option</a>
    <ul class="hideul">
     <li>Add Post</li>
     <li>Post List</li>
    </ul>
   </li>
 </ul>

$(document).ready( function() {
  $(".showul").click(function(){
  $(this).siblings(".hideul").slideToggle("slow");
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>   
  <li><a href="#" id="update" class="showul">Update Pages</a>
    <ul class="hideul">
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </li>
  <li><a href="#" id="category" class="showul">Category Option</a>
    <ul class="hideul">
      <li>Add Category</li>
      <li>Category List</li>
    </ul>
  </li>
  <li><a href="#" id="postoption" class="showul">Post Option</a>
    <ul class="hideul">
     <li>Add Post</li>
     <li>Post List</li>
    </ul>
   </li>
 </ul>

  1. To find the ul you need to go to parent of anchor then find the ul
  2. You can also use .siblings()

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

$(document).ready( function() {
  $(".showul").click(function(){
    $(this).next(".hideul").slideToggle("slow"); // get the next element of anchor tag and toggle it
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<ul>
   <li><a href="#" id="title">Title & Slogan</a></li>
   <li><a href="#" id="social">Social Media</a></li>
   <li><a href="#" id="copyright">Copyright</a></li>
   <li><a href="#" id="update" class="showul">Update Pages</a>
       <ul class="hideul">
         <li>About Us</li>
         <li>Contact Us</li>
       </ul>
   </li>
   <li><a href="#" id="category" class="showul">Category Option</a>
       <ul class="hideul">
         <li>Add Category</li>
         <li>Category List</li>
       </ul>
     </li>
   <li><a href="#" id="postoption" class="showul">Post Option</a>
     <ul class="hideul">
       <li>Add Post</li>
       <li>Post List</li>
     </ul>
   </li>
</ul>

Try this:

$(document).ready( function() {
  $(".showul").click(function(){
    console.log("here")
    $(this).next(".hideul").slideToggle("slow");
  });
});

Upvotes: 0

Related Questions