Home/ Questions/Q 8755123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T13:47:05+00:00

I am having some issues when i am trying to work with slidetoggle property

  • 0

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>
 .....................
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();
});​

    ​

    • 0