CODEWITHSUNDEEP
javascriptjqueryhtmlwordpressslidetoggle
Aj Troxell
Aj Troxell

Reputation: 265

jQuery .show working but not .hide when using slideToggle

I am using jQuery for multiple toggling menus on my site. However, if I change it's initial loading from .show to .hide it will not work.

My js file is:

jQuery(document).ready(function($) {
$('div ul.menu').hide();
$('h2.trigger').click(function() {
$(this).toggleClass("active").next().slideToggle('slow');
return false;
});
});

And my html for my multiple menus is like so:

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

Any ideas why this will not work?

Upvotes: 0

Views: 601

Answers (1)

David Brainer
David Brainer

Reputation: 6331

Simply get rid of your extra div tag. Your next() is picking that instead of the ul.menu you are trying to target. Like so:

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

You will also need to modify the following line

$('div ul.menu').hide();

to leave out the div

$('ul.menu').hide();

Note: the reason that this appears to work with .show() is that your div is shown by default so the fact that the .show() is being called on the wrong item goes unnoticed.

Upvotes: 1

Related Questions