如何在单击div元素后显示更多文本？

Question

Currently I am working on a personal project. You can see the website I am making so far here:

https://codepen.io/JoyFulCoding/pen/EzWyKv

The problem is that I am struggling to add the following feature. The feature is when a user clicks on any of the 6 colored boxes, a further information section should display like below:

I have tried adding a paragraph with an id that has it's display set to none initially. When the user clicks on one of the boxes, the corresponding text for that topic should be shown.

HTML

<p id="fbAdCampaignText> Example Text here </p>

CSS

#fbAdCampaignText {
    display:none;
}

.display {
    display:inline-block;
}

jQuery

 $("#fbAdCampaigns").on('click', function(){
     $("#fbAdCampaignText").toggleClass("display");
     });

Note: i am using display:none instead of visibility:hide because I don't want the hidden text to take up space since if it did, it may mess up the structure of each of the 6 boxes.

However, this code doesn't seem to do what I want, that is, show corresponding further information depending on which 1 of the 6 boxes is clicked. How can I display further text after an element is clicked in this manner?

Answer 1

You meant this? https://codepen.io/dravas/pen/NVgvgN?editors=1010

Just change

$("#fbAdCampaignText").toggleClass("display")

to

$("#fbAdCampaignText").toggle()

And if you want to trigger only that div that is inside clicked element then:

$(".fbAdCampaigns").on('click', function(){
  $(this).find("#fbAdCampaignText").toggle();
});

Answer 2

Okay, a couple of things here. Firstly, you can't have more than 1 of the same id in your document, so if you have 6 of those paragraphs, lose the id and use a class instead.

Using an id also gives you specificity issues, where the .display class would still have been overridden by the id's styles.

The other thing is that in your jQuery, you're going to toggle the class on all of those elements if you use a class. You need to specifically toggle the class for the element you clicked, so use $(this) instead - to target the element you clicked.

HTML:

<p class="fbAdCampaignText> Example Text here </p>

CSS:

.fbAdCampaignText {
  display:none;
}

.fbAdCampaignText.display { // you would have had specificity issues with the id otherwise
    display:inline-block;
}

jQuery

$(".fbAdCampaigns").on('click', function(){
  $(this).toggleClass("display"); // only target the clicked element
});