jQuery fireing all modal windows at once, even with different target #id

Question

Its gonna be simple, I know!! but cant figure out why all my different Modal windows are being called at the same time, even though each nav link as a unique #id link attributed to it.

HTML - NAV

<div id="main" class="faded-in">
    <h3>
        <a class="js-modal" href="#about">ABOUT</a> &bull; 
        <a class="js-modal" href="#music">MUSIC</a> &bull; 
        <a class="js-modal" href="#live">LIVE</a> &bull;
    </h3>
</div><!-- end of #main -->

HTML - Modal window

<article id="about" class="modal faded-out">
    <div class="modal-spiel">
        <p>content</p>
    </div>
</article>

<article id="live" class="modal faded-out">
    <div class="modal-spiel">
        <p>content 2</p>
    </div><!-- end of .modal-spiel -->
</article><!-- end of .modal faded-out --> 

css

(modal windows are used a full screen overlay, presenting different page content)

jQuery

}), $(document).ready(function() {
    $(".tubular-mute").click(function() {
        $("a.tubular-mute").toggleClass("tubular-muted")
    }) 
})),$(".js-modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
}), $(".modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
});

Answer 1

By using this selector

$("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")

You're telling jquery to execute .toggleClass method on all elements with class="modal", and since there are more than one such elements, all of your modal windows are opened at the same time.

Assuming ABOUT link with href="#about" opens #about modal window, MUSIC link with href="#music" opens #music modal window, and LIVE link with href="#live" opens #live modal window, you can replace this part of code

$(".js-modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
})

with this

$(".js-modal").click(function() {
    $($(this).attr("href")).toggleClass("faded-in").toggleClass("faded-out")
})

To close the modal on click, replace this

$(".modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
});

with this

$(".modal").click(function() {
    $(this).toggleClass("faded-in").toggleClass("faded-out")
});