Question

I have a nested menu with content divs that toggle onclick. By default, when a page loads, the menu shows with all Content divs hidden. I am trying to show when the page loads (without any clicks) the Content div that is active (class=”active”).
This is my HTML:

<ul> 
 <li><h3 class="toggle_action"> Mailing Lists</h3>  // toggle trigger
  <ul class="div_toggle">  // the content div
   <li><h3 class="toggle_action"><a href="/list" class="active">Overview</a></h3></li>
   <li>...another link...</li>
  </ul>
 </li>
</ul>

This is my jQuery:

(function ($) {
   $(document).ready(function() {
        $(".div_toggle").slideUp();
        $(".active").Show();
        $(".toggle_action").click(function(){
            $(this).next(".div_toggle").slideToggle("slow");
        });         
    });    
  })(jQuery);

I’ve searched for hours but can only find code that shows/hide onclick, and I must be missing something to do this on page load only. Please help point me in right direction!

Answer 1

One thing that jumps out at me is that you are using $(‘.active’).Show() which is not a jQuery Method. You want $(‘.active’).show(). Notice the lower case “S”.

In addition, you didn’t close the H3 tag, and you are hiding the parent element.

Simple example with same logic:

<div class="a">
      <div class="b">Apple</div>
      <div class="c">Pear</div>
</div>

$(function(){
  $('.a').slideUp();
  $('.b').show();

  // No matter what you will never see .b or .c.  They will always be hidden
     when .a slides up

})