Interactive Tracker Boxes #3 - Content - jQuery Preparation

Submitted by Yorkiebar on Friday, September 26, 2014 - 10:50.

Introduction:

This tutorial is the third part of my interactive tracker boxes tutorial series which allows content to change dependant upon which tracking box the user clicks on. This part is covering the content of the tracker boxes.

HTML:

The heading for the box which is hovered over will go under the 'informationTitle' CSS ID, and the information will go under the 'informationParagraph' CSS ID.

<div class='information'>
	<h3 id='informationTitle'></h3>
	<p id='informationParagraph'></h3>
</div>

Well, there is one change that we need to make. We want to be able to distinguish each tracker box from the others so we simply give them a numeric ID, like so;

<div id='1' class='box'>
 
</div>
<div id='2' class='box'>
 
</div>
<div id='3' class='box'>
 
</div>

Content:

We now need to write the content we are going to set once the the boxes are hovered over. To do this, we simply write an appropriate h3 tag for the title, and p tag for the paragraph/main content/information and then give each tag the same numeric ID as the box we want to link it to. We also give it a CSS class named 'hide'.

<h3 id='1' class='hide'>Title 1</h3>
<h3 id='2' class='hide'>Title 2</h3>
<h3 id='3' class='hide'>Title 3</h3>
<p id='1' class='hide'>Paragraph 1</p>
<p id='2' class='hide'>Paragraph 2</p>
<p id='3' class='hide'>Paragraph 3</p>

CSS:

We have created a new class use named 'hide', we now need to create this within our CSS file (or style block if you're using inline styling). This 'hide' class will simply not display the content with that class. To do this, we use the display CSS property and set it to 'none'...

.hide {
	display: none;
}

Finished!

The next part of jQuery may be slightly confusing for some people, so I have added it to an extra part.

Add new comment

14 views