Q:

Inconsistent jquery button click behaviour

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?

A:

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

