Part of the interactivity that jQuery can bring to your website is to change the appearance of elements when events occur. This could be to change a font color, a background color, a font-size, etc.

This tutorial will use the jQuery API .click().addClass(), .removeClass().css() and .children()  methods.

The .addClass() method will add a class name to the specified element. The class name must already exist in your stylesheet for any change in appearance to occur. This class name will be added at the end of any other classes that already exist for that element in the document, so any styles will override previous styles. The old class name is not removed.

The .css() method will add inline styling to the element. Inline styling will override stylesheet styling for that element for the properties stated in the parameters.

The .removeClass() method will remove the class name from the specified element.

 

jquery-blank.html

Create a new document: tutorial-6.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-6.html.


Create the HTML elements

Inside of the <body>...</body> tags we are going to create a container element and several topic areas that will be highlighted when the visitor click on them when the jQuery is applied.

Type the following into your open document:

<div id="container">
<div class="topicbox">
    <h4>Topic A</h4>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est.</p>
    <p class="readMore">READ MORE...</p>
</div>
<div class="topicbox">
    <h4>Topic B</h4>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est.</p>
    <p class="readMore">READ MORE...</p>
</div>
<div class="topicbox">
    <h4>Topic C</h4>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est.</p>
    <p class="readMore">READ MORE...</p>
</div>
<div class="topicbox">
    <h4>Topic D</h4>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est.</p>
    <p class="readMore">READ MORE...</p>
</div>
<input type="button" value="RELOAD" onClick="document.location.reload(true)">   
</div>


Style the HTML element

Let's add some styling to create the outer container to hold it all and the topic boxes for the visitor to click. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Add the following:

<style type="text/css">
    body{font-family: sans-serif;font-size: .9em;}
    h4,p {margin: 2px 0;}
    #container {width: 400px; margin: 0 auto; background: #ffffff;padding:10px 20px;}
    .topicbox {cursor: pointer;padding:8px 15px;background: #666;
    color: #888;border:#333 solid 2px;}
    .topicbox h4 {color: #bbb;}
    .highlight {background: #fff; color: #444;border:#000 solid 2px;}
    .highlight h4 {color: #222;}
    .readMore {text-align: right;color: #666;font-weight: bold;}
</style>


Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
    $(document).ready(function(){
        $(".topicbox").click(function(){
            $(".topicbox").removeClass("highlight");
            $(this).addClass("highlight");
            $(this).children("p.readMore").css("color","#AA0000");
        });
    });  // End document.ready()
</script>


Let's go thru the script step by step:

$(".topicbox").click(function(){

this looks for all elements class="topicbox" and ties in a click event with a function.

$(".topicbox").removeClass("highlight");

this will remove the class "highlight" from ALL of the elements class="highlight". The first click this step is not needed, but on following clicks, this will turn the previous box back to the original grey state by removing the class "highlight" if it is there. If that class is not there, this step does nothing for that particular element.

$(this).addClass("highlight");

by using $(this) we are targeting ONLY the element that received the action and not all the elements with that class. The .addClass() will attach that class to the element.

$(this).children("p.readMore").css("color","#AA0000");

this adds styling to the <p class="readMore"> line that lies within the clicked element. Note when you test out the page that the styling for this element stays with the element, even as the class is removed on the surrounding div. If you add inline styling using .css(), to remove it you must negate the styling with another .css() method to take it back to the original state.

});

this is necessary to close the function of the.click() method

 

Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:

file:///C:/jquery-tutorials/tutorial-6.html

When you open up the document, you should see something like this. Try clicking on the different topic boxes to see what occurs