How do I show or hide specific content in JavaScript/jQuery with linked elements?

MisterM
November 9, 2023
240 views
0 votes
2 Answers

I have a pretty specific need in JavaScript/jQuery and I can’t find the perfect solution, there is always a criterion that I can’t fulfill.

Here is a summary of the situation:
I have 3 titles each with their own id and a common class.
I also have 3 contents each with their own id and a common class.

At the code level, it looks like this:

<h3 id="title1" class"triggers">Title 1</h3> 
<h3 id="title2" class"triggers">Title 2</h3> 
<h3 id="title3" class"triggers">Title 3</h3>

<p id="content1" class="myContents">Content 1</p> 
<p id="content2" class="myContents">Content 2</p> 
<p id="content3" class="myContents">Content 3</p>

My constraints are as follows:

all content is hidden by default
when I click on a title, the related content is displayed (Ex: I click on the title1 the content1 is displayed) and the selected title changes color
When I click on another title, the one that was previously selected returns to its original color and its content disappears. On the other hand, the title I just clicked on changes its color and its specific content appears (Ex: I click on the title2, the title1 returns to its original color and the content1 disappears while the title2 changes color and the content2 appears). Only one content can appear at a time.
When I click a second time on the currently selected title, it returns to its original color and its content disappears (but if I click a third time, it reappears again, basically one shot it appears and one shot it disappears, so a click on two).
That the title id is automatically attached to the content id (since in my example, there are only 3 titles and 3 contents but there could very well be 20, 30, etc.).

A situation in appearance "basic" for the common developers, except that I can not meet all these conditions at the same time, there is always a time when it sticks… Be lenient, I’m still a beginner in the trade

So if you are able to help me solve this block, I would be enormously grateful! Thanking you already for the time you will take to read me 🙂

So far, I have managed to meet some of my requirements on the display of content, but I have not managed to fulfill all these requirements at the same time.

Answers

Since you have multiple requirements I would just toggle some data attribute values and match up the CSS; you can put any selector in that matches the target, then toggle that. You can even have "special" css as I show for the Five element – or even have a stoplight effect with Green/Yellow/Red etc. this way.

I added a couple more targets with differing selectors just so you could see it is flexible.

Note that you could even have TWO and wrap them in a div so the siblings matches. Triggers and Content can be in any order as long as the selectors match.

function handleTriggerClick(event) {
  const trig = this;
  const tval = trig.dataset.clicker;
  //reset all triggers
  this.parentNode.querySelectorAll(".triggers").forEach(sib => sib.dataset.clicker = "base");
  // set this trigger
  trig.dataset.clicker = tval !== "red" ? "red" : "base";
  const targS = trig.dataset.related;
  // get the target from the selector in the attribute
  const tC = document.querySelector(targS);
  //reset the targets siblings (and it) 
  tC.parentNode.querySelectorAll(".myContents").forEach(sib => sib.dataset.trigger = "hide");
  // set to show
  tC.dataset.trigger = "first";
}

document.querySelectorAll(".triggers[data-related]").forEach(trig => {
  trig.addEventListener("click", handleTriggerClick, false);
  trig.dataset.clicker = "base"
});

.triggers[data-clicker="base"] {
  color: blue;
}

.triggers[data-clicker="red"] {
  color: red;
}

.myContents[data-related] {
  display: none;
}

.myContents[data-trigger="first"] {
  display: block;
  color: red;
}

.myContents[data-trigger="first"][data-related="five"] {
  display: block;
  color: green;
  font-weight: bold;
  width: 15em;
  text-align:center;
  border: solid 1px #00ff0080;
}

.myContents[data-trigger="hide"] {
  display: hide;
}

<h3 id="title1" class="triggers" data-related="#content1">Title 1</h3>
<h3 id="title2" class="triggers" data-related="#content2">Title 2</h3>
<h3 id="title3" class="triggers" data-related="#content3">Title 3</h3>
<h3 class="triggers four" data-related=".myContents.four">Title 4</h3>
<h3 class="triggers" data-related=".myContents[data-related='five']">I am number 5</h3>

<p id="content1" class="myContents" data-related="#title1">Content 1</p>
<p id="content2" class="myContents" data-related="#title2">Content 2</p>
<p id="content3" class="myContents" data-related="#title3">Content 3</p>
<p class="myContents four" data-related=".triggers.four">Content 4</p>
<p class="myContents" data-related="five">Five is alive!</p>

<!DOCTYPE html>
<html>
    
    <head>
       
        <title>Java Script Function and Event Example</title>
        <style>
            
            #content1,#content2,#content3
            {
                visibility: hidden;
            }
           
            .highlight
            {
                color: red;
            }
        </style>

            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript">
        
            $(document).ready(function() {

                
                $("#title1").click(function(e) {
                    $('*').removeClass('highlight');
                    $(this).addClass('highlight');

                    $("#demo").text($("#content1").text());
                });

                $("#title2").click(function() {
                    $('*').removeClass('highlight');
                    $(this).addClass('highlight');
                   
                    $("#demo").text($("#content2").text());
                });

                $("#title3").click(function() {
                    $('*').removeClass('highlight');
                    $(this).addClass('highlight');
                   
                    $("#demo").text($("#content3").text());
                });
    
            });  
        </script>
    </head>
    
    <body>
<h3 id="title1" class"triggers">Title 1</h3> 
<h3 id="title2" class"triggers">Title 2</h3> 
<h3 id="title3" class"triggers">Title 3</h3>

<p id="content1" class="myContents">Content 1</p>
<p id="content2" class="myContents">Content 2</p> 
<p id="content3" class="myContents">Content 3</p>
<p id="demo"></p>

    </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.