CODEWITHSUNDEEP
jquery
bhttoan
bhttoan

Reputation: 2736

Jquery toggle with unknown number of items

I have some dynamically created content where there could be 2 or there could be 200 DIV's - each div has some content I want to toggle and an arrow to show the content.

I can get toggle etc to work fine but when it toggles it toggles everything (i.e. all the items with the class name - as it should) but I only want it to toggle the relevant one.

<div id="outer">
    <div class="inner">
        <div class="left">
            <div class="expanded">
                12345
            </div>
        </div>
        <div class="right">
            <div class="arrow-down"></div>
        </div>
    </div>
    <div class="inner">
        <div class="left">
            <div class="expanded">
                12345
            </div>
        </div>
        <div class="right">
            <div class="arrow-down"></div>
        </div>
    </div>
    <div class="inner">
        <div class="left">
            <div class="expanded">
                12345
            </div>
        </div>
        <div class="right">
            <div class="arrow-down"></div>
        </div>
    </div>    
</div>

I have tried suggestions from toggling dynamically created divs in jquery to use on and from Toggle dynamically created divs to use next/prev but when I use these nothing happens and there is nothing in DevTools to help

Can anyone point me in the right direction so when I click each arrow only its expanded box appears? http://jsfiddle.net/pgJf4/

Thanks

Upvotes: 0

Views: 114

Answers (2)

A.T.
A.T.

Reputation: 26332

use this to get target element

$( ".arrow-down" ).click(function() {
  $(this).parent().parent().find('.expanded').toggle( "slow" );
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388396

You can target the expanded element within the same inner element

$(".arrow-down").click(function () {
    $(this).closest('.inner').find('.expanded').toggle("slow");
});

Demo: Fiddle

Upvotes: 1

Related Questions