Inconsistent jquery button click behaviour

Question

Im a bit new to jquery so this may be a common probably but I am unable to find what I need on the web.

The issue: I have a div(inner1) inside a div(outer), the inner1 div is hidden until a button is clicked, when clicked the inner1 div is shown and fades out the background. Within inner1 I have another div(inner2) with similar functionality. When inner1 shows a button is displayed to show inner2. The above works fine. My issue is that if I click the button to show inner1, then exit(hide) the shown div(inner1) then push the button to show it again it now shows both of the inner divs(inner1, inner2). Does this make sense? I have no idea why this is happening.

The Code:

Html:

<div class="documentlist">
    <div class="modalBackground"></div>
    <div class="modalContent"> <a href="#" class="close-modal">x</a>
Text1
        <input type="button" id="btnsm1" value="t1" />
        <div class="documentdetails">
            <div class="modalBackground"></div>
            <div class="modalContent"> <a href="#" class="close-modal">x</a> Text2</div>
        </div>
    </div>
</div>
<input type="button" id="btnsm" value="t" />

Jquery:

$(document).ready(function () {
    $('#btnsm').on('click', function () {
        $('.documentlist>.modalBackground').toggleClass('show');
        $('.documentlist>.modalContent').toggleClass('show');
    });
    $('#btnsm1').on('click', function () {
        $('.documentdetails>.modalBackground').toggleClass('show');
        $('.documentdetails>.modalContent').toggleClass('show');
    });
    $('.close-modal').on('click', function () {
        $('.modalBackground').toggleClass('show');
        $('.modalContent').toggleClass('show');
    });

    $('.modalBackground').on('click', function () {
        $('.modalBackground').toggleClass('show');
        $('.modalContent').toggleClass('show');
    });
});

A Fiddle of the above.

Does anyone have any ideas?

Thanks for the response but i dont think this is what im looking for — Srb1313711
– Srb1313711, Commented Nov 2, 2015 at 11:46

Joy Biswas · Accepted Answer · 2015-11-02 11:54:15Z

1

You need to explicitly say removeClass since .toggle() adds 'show' if not there and removes 'show' if present, cant rely on that in close where you always want to remove the show class from both the elements

Here is what you want to do

$('.close-modal,.modalBackground').on('click', function () {
    $('.modalBackground').removeClass('show');
    $('.modalContent').removeClass('show');
});

Edit 2: I didn't check you had to use back as close trigger updated fiddle $('.close-modal,.modalBackground')

Updated fiddle

edited Nov 2, 2015 at 11:54

answered Nov 2, 2015 at 11:47

Joy Biswas

6,5631 gold badge27 silver badges50 bronze badges

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

3 Comments

Srb1313711 Over a year ago

Thanks for the reply however your fiddle still contains my issue. Where im using toggle it shouldnt even touch the inner>inner div based on the selectors im using

Joy Biswas Over a year ago

@Srb1313711: Check updated fiddle https://jsfiddle.net/wter4pr8/2/

Srb1313711 Over a year ago

Oh thanks you! I see my issue now! This is exactly it

undefined_variable · Accepted Answer · 2015-11-02 11:53:31Z

$(document).ready(function () {
    $('#btnsm').on('click', function () {
        $('.documentlist>.modalBackground').toggleClass('show');
        $('.documentlist>.modalContent').toggleClass('show');
    });
    $('#btnsm1').on('click', function () {
        $('.documentdetails>.modalBackground').toggleClass('show');
        $('.documentdetails>.modalContent').toggleClass('show');
    });
    $('.close-modal').on('click', function () {
        $('.modalBackground').removeClass('show');
        $('.modalContent').removeClass('show');
    });

    $('.modalBackground').on('click', function () {
        $('.modalBackground').removeClass('show');
        $('.modalContent').removeClass('show');
    });
});

Check this

Collectives™ on Stack Overflow

Inconsistent jquery button click behaviour

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related