.click() on element nested inside of element with .click()

Question

I am trying to create an accordion inside of an accordion... and I am struggling a little.

essentially, I have a div .applicant, which upon click adds a class .expand, which sets the height to auto, but, inside of the .applicant div, I have another div .applicant-child, which SHOULD do the same thing, and does... but, .applicant closes when you click .applicant-child, meaning you have to click the .applicant again to open view the nested element.

Here is my code:

HTML

    <div class="row">
        <div class="col-sm-12">
            <div class="applicant">
                <p><b>PS4 Tournaments</b></p>
                <div class="applicant-child">
                    <p>lalal</p>
                    <p>lalal</p>
                </div>
            </div>
        </div>
    </div>

jQuery

    $('.applicant').click(function(){
        if ($(this).hasClass('expand')) {
            $(this).removeClass('expand');
        } else {
            $( this ).addClass('expand');
        }
    });

    $('.applicant-child').click(function(){
        if ($(this).hasClass('expand')) {
            $(this).removeClass('expand');
        } else {
            $( this ).addClass('expand');
        }
    });

I could simply remove $(this).removeClass('expand'); from .appliant, but we'll be displaying a lot of data, so that isn't ideal.

How do I solve this?

Thanks in advance :)

make application div and application-child div siblings. Nested clicks are bad idea — Sheki
– Sheki, Commented Aug 9, 2018 at 15:23
You need to call stopPropagation() on the click event that's raised. You can also simplify the class adding/removnig by just using toggleClass() — Rory McCrossan
– Rory McCrossan, Commented Aug 9, 2018 at 15:24

Agash Thamo. · Accepted Answer · 2018-08-09 15:24:57Z

1

That's just event bubbling an expected behaviour. See this link on jQuery on how to disable the click-Event to bubble up the DOM and triggering the event on your parent element.

Basically, you just have to do this:

$('.applicant-child').click(function(event){
    event.stopPropagation();
    if ($(this).hasClass('expand')) {
        $(this).removeClass('expand');
    } else {
        $( this ).addClass('expand');
    }
});

answered Aug 9, 2018 at 15:24

Agash Thamo.

7486 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Over a year ago

Perfect! I wasn't aware of this, I am somewhat new to jQuery. Thank you very much, Agash! Really appreciate it :)

TreffnonX · Accepted Answer · 2018-08-09 15:24:14Z

0

You want to prevent bubbling. Bubbling means, that the event you are reacting to is being passed up the DOM to the parent objects, until it reaches the window.

Check out the "event.stopPropagation()" method, which will prevent any subsequent listeners from reacting.

answered Aug 9, 2018 at 15:24

TreffnonX

2,96317 silver badges27 bronze badges

1 Comment

Joe Over a year ago

Thank you, Treffnon! exactly what I am after.

RyanA91 · Accepted Answer · 2018-08-09 15:27:53Z

0

On your click handler if you pass through a param:

$('.applicant').click(function(event){
    console.log(event.target);
    if ($(this).hasClass('expand')) {
        $(this).removeClass('expand');
    } else {
        $( this ).addClass('expand');
    }
});

you can use event.target to check if you are clicking on the parent or the child and decide on what action to take from there.

answered Aug 9, 2018 at 15:27

RyanA91

9437 silver badges9 bronze badges

1 Comment

Joe Over a year ago

Thanks, Ryan. I have opted to go with the answer @agash has provided, but it's great to know this can be done in multiple ways. Thanks!

Collectives™ on Stack Overflow

.click() on element nested inside of element with .click()

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related