CODEWITHSUNDEEP
javascriptjqueryhtml
jytoronto
jytoronto

Reputation: 558

jQuery toggle inside toggle, with individual selection

I'm trying to implement the jquery UI toggle feature.

Here's what I have so far: http://jsfiddle.net/PauWy/470/

I'm trying to make it so that when I click on Item1, the "+" and "-" appear, and I can click on either "+" or "-" to have a different result. But as you can see, there are two problems:

  1. The toggle hides the +/- when I try to click on it.
  2. Changing one +/- changes all the other ones.

Please advice on how to fix this issue, thanks!

Upvotes: 1

Views: 509

Answers (3)

Or Duan
Or Duan

Reputation: 13810

just saw your update, will check it

if i got your goal, why don't you use something like this:

$(".trigger").click(function (){
        $(".menu-item", this).toggle();
});
$(".menu-item").toggle();
$('.add').hide();
$('.reduce').hide();

$('.plus').click(function () {
    event.stopPropagation();
    $(this).closest(".menu-item").find('.add').toggle();
});

$('.minus').click(function (e) {
    event.stopPropagation();
    $(this).closest(".menu-item").find('.reduce').toggle();
});

and the html:

<ul id="menu-items">
    <li id="item_1">
        <div class="trigger">Item1
            <div class="menu-item" >
                <p class="to-do">
                    <div class="plus"> + </div>
                    <div class="minus"> - </div>
                </p>
            <div class="add">Add</div>
            <div class="reduce">Subtract</div></div>
        </div>
    </li>
    <li id="item_2">
        <div class="trigger">Item2
            <div class="menu-item" >
                <p class="to-do">
                    <div class="plus"> + </div>
                    <div class="minus"> - </div>
                </p>
            <div class="add">Add</div>
            <div class="reduce">Subtract</div></div>
        </div>
    </li>
    <li id="item_3">
        <div class="trigger">Item3
            <div class="menu-item" >
                <div class="plus"> + </div>
                <div class="minus"> - </div>
                <div class="add">Add</div>
                <div class="reduce">Subtract</div>          
            </div>
        </div>
    </li>
</ul>

this one was tricky, i changed the html also. just to explain the basic:

this line prevent the click event from the parent:

event.stopPropagation();

this line looking on "this" parent and finding the "add"/"reduce" closet class:

$(this).closest(".menu-item").find('.add')

hope its helped. GoodLuck!

Upvotes: 1

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

Not sure but may be u need this

$('#toggle > span').click(function () {
    var ix = $(this).index();

    $('#add').toggle(ix === 0);
    $('#reduce').toggle(ix === 1);
});

$('#add').click(function () {
 alert('add click');
});

$('#reduce').click(function () {
     alert('reduce click');
});

Upvotes: 0

Balint Bako
Balint Bako

Reputation: 2560

Ok then here it is:

$('.to-do > span').click(function () {
    var ix = $(this).index();
    console.log(ix);
    $('.add', $(this).parents('div')).toggle(ix == 0);
    $('.reduce', $(this).parents('div')).toggle(ix == 1);
    return false;
});

JSFiddle

Upvotes: 1

Related Questions