Question

I need help with my vertical menu. This is what I have right now:
http://jsfiddle.net/x4NbH/

What I want to do is if I have a <ul> open and click to open another section of the menu I want the open <ul> to close and the new one to open.
For example ‘item-1’ is open, I click ‘item-2’ and this closes ‘item-1’ and opens ‘item-2’.

HTML:

<div class="menu-item">
<h4 id="item-1"><a href="#">Item 1</a></h4>
<ul id="item-1">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

<div class="menu-item">
<h4 id="item-2"><a href="#">Item 2</a></h4>
<ul id="item-2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

<div class="menu-item">
<h4 id="item-3"><a href="#">Item 3</a></h4>
<ul id="item-3">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

CSS:

.menu-item h4 {
    margin: 0px;
    padding: 0px;
}
.menu-item ul {
    margin: 0px;
    padding: 0px 5px;
    display: none;
}

JavaScript:

$( "h4#item-1" ).click(function() {
    $( "ul#item-1" ).toggle( "blind", 1000 );
});

$( "h4#item-2" ).click(function() {
    $( "ul#item-2" ).toggle( "blind", 1000 );
});

$( "h4#item-3" ).click(function() {
    $( "ul#item-3" ).toggle( "blind", 1000 );
});

How can I achieve this in a simple way?

Answer 1

IDs must be unique, you can use classes instead, try this:

var $ul = $('ul');
$( "h4" ).click(function() {
    $ul.hide("blind", 1000);
    $(this).next().show( "blind", 1000);
});

http://jsfiddle.net/zaZLj/