working with slidetoggle in jquery

Question

I am having some issues when i am trying to work with slidetoggle property in jquery. What i would like to accomplish is:

• i have a parent div with a dynamic number of children divs.
• when the page is loaded the first div is toggled (open).
• i would like to when i click on one of children divs , the one that i clicked should toggle open and any other which is open to toggle closed.

I've tried this:

   $i++;
   $("#items"+ $i).click(function(){
            $("#items'.$i.'-submenu").slideToggle('slow', function() {
                 if ( $("#item'.$i.'s-submenu").is(":visible")) {
                      $("#items'.$i.'").css("border-right","none");
            }
            else
            {
                $("#items'.$i.'").css("border-style","solid solid solid solid");
                $("#items'.$i.'").css("border-right-width","1px");
            }
            });

            return false;
        });

Later edit:

The HTML looks like:

<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
<div class="item">Click here </div>
<div class="content">There it goes the hidden content</div>
 .....................

Answer 1

UPDATED USING YOUR HTML

New jQuery

$(".item").click(function(e) {
    $(this).next(".content").slideToggle().siblings(".content").each(function(i) {
        if ($(this).is(":visible")) $(this).slideToggle();
    });
});

New jsFiddle Here

---

You could just use jQueryUI accordion, however if you want to do it yourself it is not hard.

See jsFiddle Here

The code would be like below:

Basic HTML Layout

<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>
<hr />
<div class="item">
    <p class="clickable">Click Here</p>
    <div class="content">
        I'm open!
        <br />
        I'm open!
        <br />
        I'm open!
    </div>
</div>​

a lil CSS

.content { display: none; }
.clickable { cursor: pointer; }

Finally some jQuery

$(".item").click(function(e) {
    $(this).siblings().each(function(i) {
        if ($(this).children(".content").is(":visible")) $(this).children(".content").slideToggle();
    });
    $(this).children(".content").slideToggle();
});​

​