Make Headers clickable and display specific paragraphs when selected

Question

I am trying to setup a horizontal bar with 3 clickable titles. Before being clicked they are one color but when selected I'm trying to get that section to change color and display a specific paragraph below the bar.

Here is a jfiddle of what I currently have..

<div class="storytelling_tabs" style="width:100%; background:#44c5e1; text-align:center;">
<h5 style="padding:3% 3% 3% 0px; display:inline-block;">Section<br>One</h5>
<h5 style="padding:3% 4%; display:inline-block; border-left:10px solid; border-right:10px solid;">Section<br> Two</h5>
<h5 style="padding:3% 0px 3% 3%; display:inline-block;">Section<br> Three</h5>

http://jsfiddle.net/9g9ybepy/1/

From what I have tried to gather online I might need to use a function of clickable(), but I'm not sure.

Hopefully there is a way to do this, thanks in advance.

For this you need more than just HTML and CSS. You need like JavaScript/JQuery, you must have heard about it right? — divy3993, Oct 23 '15 at 18:30

score 1 · Answer 1 · answered Oct 23 '15 at 20:15

You don't need Javascript, you can do this with css :target

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_tab

storytelling_tabs {
  width: 100%;
  background: #44c5e1;
  text-align: center;
}
storytelling_tabs h5 {
  color: #fff;
  font-size: 0.9em;
}
.tab .showMe {
  display: none;
}
.tab .showMe:target {
  display: block;
}

<div class="tab">
  <div class="storytelling_tabs" style="width:100%; background:#44c5e1; text-align:center;">
    <a href="#link1" tyle="padding:3% 3% 3% 0px; display:inline-block;">Section One</a>
    <a href="#link2" style="padding:3% 4%; display:inline-block; border-left:10px solid; border-right:10px solid;">Section Two</a>
    <a href="#link3" style="padding:3% 0px 3% 3%; display:inline-block;">Section  Three</a>
  </div>
  <div class="showMe" id="link1">
    <p>Patagraph1</p>
  </div>
  <div class="showMe" id="link2">
    <p>Patagraph2</p>
  </div>
  <div class="showMe" id="link3">
    <p>Patagraph3</p>
  </div>
</div>

Note that this does change the URL and potentially moves the page. https://css-tricks.com/on-target/ — isherwood, Oct 23 '15 at 20:21

score 0 · Answer 2 · answered Oct 23 '15 at 18:43

To do that you need to use JavaScript. You need to create a function and "tell" to the html that your page will execute that function when your h5 is clicked.

Here the html:

<h5 style="padding:3% 3% 3% 0px; display:inline-block;" onClick="myFunction(this.id, idParagraph)">Section<br>One</h5>

Here is JavaScript function:

function sectionClick(idSection, idParagraph){
 document.getElementById(idSection).css.backgroundColor = "blue";

    document.getElementById(idParagraph).css.display = "block";
}

Make Headers clickable and display specific paragraphs when selected

2 Answers2