Question

So the code below works only for first element ‘GALLERYTITLE’,

$(function(){$("#diradd").click(function(event)
{event.preventDefault();$("#diraddform").slideToggle();});});

HTML:

<!--stuff before-->

<div class="gallerytitle"

<a href="#"class="options" id="diradd" >Add new sub-gallery</a> <!--"button"-->

<!--another stuff divs, buttons etc.-->

<div id="diraddform">

<!--things in this div-->
</div></div> <!--the end of #1 gallerytitle div-->

<div class="gallerytitle"

<a href="#"class="options" id="diradd" >Add new sub-gallery</a> <!--"button"-->

<!--another stuff divs, buttons etc.-->

<div id="diraddform">

<!--things in this div-->

</div>

</div> <!--the end of #2 gallerytitle div-->

css:

diraddform{
display:none;}

basically i have the same probleme like here

but I can’t use .next(); because i have divs after my “button”

Answer 1

Check this DEMO

<!--stuff before-->

<div class="gallerytitle">

<a href="#" class="options diradd" >
  Add new sub-gallery
</a>
  <div></div>
<!--"button"-->

  <div>Extra Buttons & Elements</div>

<div class="diraddform">
  zxcczc
</div>
</div>

<!--the end of #1 gallerytitle div-->

<div class="gallerytitle">

  <a href="#" class="options diradd">
    Add new sub-gallery 
  </a>

  <!--"button"-->

  <div>Extra Buttons & Elements</div>

  <div class="diraddform">

    zxczczczc

  </div>

</div>

<!--the end of #2 gallerytitle div-->

JS

$(function() {
    $(".options").click(function(event) {
        event.preventDefault();
        $(this).closest(".gallerytitle").find('.diraddform').slideToggle(1000);
    });
});

css

.diraddform{
display:none;}