Make Headers clickable and display specific paragraphs when selected - html

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.

Answer 1

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;">
Section One
Section Two
Section Three
</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>

Answer 2

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