CODEWITHSUNDEEP
jquery
stsdc
stsdc

Reputation: 446

jQuery allow to toggle only one element

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"

Upvotes: 0

Views: 4639

Answers (4)

voigtan
voigtan

Reputation: 9031

if you fix the markup with classes you can either use (based on that you use classes insead of div):

$(function(){
    $(".options").click(function(event) {
        event.preventDefault();
        $(this).parent().find('.diraddform').slideToggle();
    });
});​

Or you want to add more children and have a parent for all your forms+options you could use closest():

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

Demo: http://jsbin.com/ivegat/1/edit or closest: http://jsbin.com/ivegat/4/edit

Upvotes: 0

gaurang171
gaurang171

Reputation: 9080

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;}

Upvotes: 1

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

The ID must be unique in a document, and is often used to retrieve the element using document.getElementById or by using jQuery Selector

You have to replace all the ids of same name with class

I have changed your markup and replace all ids with class

HTML:

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

    <!--another stuff divs, buttons etc.-->
    <div class="diraddform">
        test1
        <!--things in this div-->
    </div>
</div> 
<!--the end of #1 gallerytitle div-->

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

    <!--another stuff divs, buttons etc.-->
    <div class="diraddform">
        test 2
        <!--things in this div-->
    </div>
</div>

​

jQuery:

$(function(){
    $(".diradd").click(function(event) {
        event.preventDefault();
        $(this).next('.diraddform').slideToggle();
    });
});​

SEE HOW IT IS WORKING HERE

Upvotes: 3

Johni
Johni

Reputation: 2959

A id is unique, you can't assign it twice (use class).

Upvotes: 0

Related Questions