Introduction:

This is the final part of my mini-series explaining how to create interactive tracker boxes in HTML, CSS, and jQuery to allow HTML content to change once the user interacts with the boxes.

This part is will explain the final step, jQuery.

jQuery Installation:

To begin using jQuery within our file, we first need to link it. We can either download and include the jQuery files, or we dynamically link our page to the official jQuery files hosted on a server by going to the official jQuery downloads page; http://jquery.com/download/, and copying the CDN links;

1. <script
   
   src
   
   =
   
   "//code.jquery.com/jquery-1.11.0.min.js"
   
   ></
   
   script
   
   >
   
2. <script
   
   src
   
   =
   
   "//code.jquery.com/jquery-migrate-1.2.1.min.js"
   
   ></
   
   script
   
   >
   

(Ensure you add 'http:' to the beginning of the source URLs if required!).

Simply write those within the 'head' tags of our page.

Now we are ready to being using jQuery.

jQuery:

Again, within the 'head' tags of our page (because this is function code, and not direct HTML elements for the page display - which all go within the 'body' tags of our page), we want to first write the appropriate 'script' tags to start Javascript functionality...

1. <script
   
   >
   
2. </
   
   script
   
   >
   

Now we want to write the document ready function, this will automatically execute once the page loads in the user's browser...

1. $(
   
   function
   
   (
   
   )
   
   {
   
2. }
   
   )
   
   ;
   

Within that function, we then want to write a listener...

1. $(
   
   '.box'
   
   )
   
   .click
   
   (
   
   function
   
   (
   
   )
   
   {
   
2. }
   
   )
   
   ;
   

This listener will now execute each time a user clicks one of the tracker boxes.

Next we want to get the ID of the HTML tracker box element that was clicked on (since that is important to changing the information)...

1. var
   
   box =
   
   $(
   
   event.target
   
   )
   
   [
   
   0
   
   ]
   
   ;
   

This will get the box itself, we can get the ID of that box by using the HTML id attribute, like so;

1. var
   
   id =
   
   box.id
   
   ;
   

The next thing we want to do is get the HTML elements where we want to place the text, this will be the informationTitle and informationParagraph HTML element IDs...

1. var
   
   heading =
   
   $(
   
   '#informationTitle'
   
   )
   
   ;
   
2. var
   
   content =
   
   $(
   
   '#informationParagraph'
   
   )
   
   ;
   

We are now almost ready to set the content, but first we need to get the content. We do this in a similar way to above, we get the HTML of the HTML elements with the ID of the box that was clicked (how we are linking the elements)...

1. var
   
   newTitle =
   
   $(
   
   '#title'
   
   +
   
   id)
   
   .html
   
   (
   
   )
   
   ;
   
2. var
   
   newPara =
   
   $(
   
   '#para'
   
   +
   
   id)
   
   .html
   
   (
   
   )
   
   ;
   

Finally we want to set the HTML of our 'informationTitle' and 'Paragraph' HTML elements, this will be shown, unlike the other titles and paragraphs containing the boxes content...

1. $(
   
   heading)
   
   .html
   
   (
   
   newTitle)
   
   ;
   
2. $(
   
   content)
   
   .html
   
   (
   
   newPara)
   
   ;
   

Finished!

Download