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>

In the “ nftCard” you seem to have one closing too many. — SymboLinker, Mar 30 '22 at 13:52
@SymboLinker Thanks for pointing it out. This has now been corrected, although this was a typo here in the question. — SirBT, Mar 30 '22 at 14:01

SymboLinker · Answer 1 · 2022-03-30T21:11:13.853

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.

You can also get the index of the card you've clicked (.card-horizontal) and specifies that same index on the code (something like $(".card-horizontal")[0] — José Lourenço, Mar 30 '22 at 11:47
@SymbolLinker I have updated my code by adding the HTML. Can you kindly show me in code? — SirBT, Mar 30 '22 at 12:58
@SirBT Now I have provided code that I tested. Excuse me for not providing a proper answer earlier. — SymboLinker, Mar 30 '22 at 20:50

mmh4all · Answer 2 · 2022-03-30T12:32:04.193

0

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");
          });
      });
 });

edited Mar 30 '22 at 12:32

answered Mar 30 '22 at 11:50

mmh4all

1,612
4
6
21

Your code snippet dosent seem to work. The backpanel doesn't slide down. Kindly review. – SirBT Mar 30 '22 at 12:06
can you share your html code? @SirBT – mmh4all Mar 30 '22 at 12:07
@SirBT is the .backPanel a sibling or a children for your card element? – mmh4all Mar 30 '22 at 12:11
I have updated my question by adding the HTML code. Perhaps both the cards (the white and the blue cards) arent correctly represented in HTML code. Kindly advise – SirBT Mar 30 '22 at 12:25
@SirBT I updated my solution check it out, i hope its help – mmh4all Mar 30 '22 at 12:32
I think your solution doesn't work because the blue .backpanel class is linked to a separate card which isnt a sibling nor a child of the white .card element... Kindly look at how the two separate cards are represented in my code and review. Perphaps you can advise on how to HTML code so that the blue .backpanel is coded as a child of the white .card? – SirBT Mar 30 '22 at 12:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243444/discussion-between-sirbt-and-mmh4all). – SirBT Mar 30 '22 at 13:10
@SirBT try this **$(this).next().slideDown("slow");** – mmh4all Mar 30 '22 at 13:22
` $(this).next().slideDown("slow");` does not work either – SirBT Mar 30 '22 at 13:40

Tushar Choudhari · Answer 3 · 2022-03-30T18:09:49.787

0

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!

edited Mar 30 '22 at 18:09

answered Mar 30 '22 at 12:09

Tushar Choudhari

21
2

Thanks for your prompt response. I have updated my question by adding the HTML code for both the white card .card-horizontal and the blue card .backPanel. I don't think I coded the .backPanel as a child of card-horizontal. Do you mind showing me how to do so? – SirBT Mar 30 '22 at 13:02
Hey @SirBT, I've edited the answer. – Tushar Choudhari Mar 31 '22 at 06:20

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

3 Answers3