How do I ensure that a click event is limited only to a card I have clicked?

Question

I am using two Bootstrap cards in my application. I conceal one of the cards (which is blue in colour) behind a card (which is white in colour) as illustrated below:

...and use the following code to reveal the concealed blue card behind the white card:

    $(document).ready(function(){
        $(".card-horizontal").click(function(){
            $(".backPanel").slideDown("slow");
        });
    });   

resulting in the desired below illustrated effect:

The issue I am having here is that when I click on a card in order to reveal its blue concealed card, all blue concealed cards belonging to all-white cards get simultaneously revealed as illustrated below:

How do I modify the above code to limit this event to only the clicked cards?

Find below my code for the card:

<div class="card w-75 card-horizontal" id="nftCard">
    <div class="img-square-wrapper">
       <img class="nftImages" src="http://via.placeholder.com/150" alt="Card image cap">
            <div class="card-body cardPadding">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
    </div>
</div>

<div class="card w-75 card-horizontal backPanel">
    <div class="img-square-wrapper">
        <div class="card-body ">
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
    </div>
</div>

Answer 1

You use $(".card-horizontal") to get elements by class name. You could give the cards and the backPanels their own id and use something like this for each pair:

$("#white-card1").on("click", function(){
    $("#blue-panel1").slideDown("slow");
});

Another way is to use things like parent, child, etc. to navigate the DOM.

In that case, if you like to use a class name, define a new class “white-card” for the click event. Otherwise clicking a blue card (in your code called a "backPanel") also does something.

If all those "white-card"s have the corresponding "backPanel" after them on the same level, the nextElementSibling property can be used.

Instead of using jQuery, I prefer pure JavaScript (except for the slideDown method that you need):

document.querySelectorAll(".white-card").forEach(el => {
    el.addEventListener("click", function(){
        el.nextElementSibling.slideDown("slow");
    });
});

I tested the following code in JsFiddle:

HTML

<div class="my-clickable-class" style="background-color: blue;">x</div>
<div style="background-color: red;">x</div>

<div class="my-clickable-class" style="background-color: yellow;">x</div>
<div style="background-color: orange;">x</div>

JavaScript

document.querySelectorAll(".my-clickable-class").forEach(el => {
    el.addEventListener("click", function() {
        el.style.color = 'white';
        el.nextElementSibling.style.backgroundColor = 'green';
    });
});

• Clicking the blue div changes the color of the red div.
• Clicking the yellow div changes the color of the orange div.

Answer 2

You can use each whenever you click on an item it will search for the related element with the class .backPanel and slide it down

In Case backPanel is a Children of Card element

$(document).ready(function(){
      $(".card-horizontal").each(function(){
          $(this).on("click", function(){
              $(this).children(".backPanel").slideDown("slow");
          });
      });
 }); 

In Case backPanel is a Sibling of Card element

$(document).ready(function(){
    $(".card-horizontal").each(function(){
        $(this).on("click", function(){
            $(this).siblings(".backPanel").slideDown("slow");
        });
    });
});

In case backPanel is an additional class in the Card element

 $(document).ready(function(){
      $(".card-horizontal").each(function(){
          $(this).on("click", function(){
              $(".backPanel", this).slideDown("slow");
          });
      });
 });

Answer 3

If the backPanel is a child of card-horizontal, you can make use of the this keyword to only select the backPanel inside card-horizontal.

Here's the documentation for this keyword.

    $(document).ready(function(){
        $(".card-horizontal").click(function(){
            $(".backPanel", this).slideDown("slow");
        });
    });   

Edit:

Since the card-horizontal and backPanel could be siblings according to your code. You can wrap them in a div and do this:

   $(document).ready(function(){
        $(".card-horizontal").click(function(){
            $(this).siblings(".backPanel").slideDown("slow");
        });
   });

I hope it helps!