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!
.div_toggle
). The element will not be visible if the container it is in is hidden. – JJJ Jan 9 '13 at 18:20