jqls04

In this lesson I want to illustrate you how to use some useful jQuery methods that allow you to manipulate easily CSS classes. In particular I prepared some examples to explain the following methods: toggleClass(), hasClass(), addClass() and removeClass().

For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Highlight content

Start taking a look at this basic example. Here is a list of items. You can highlight each item of the list by clicking over it and return to the original status with a second click. Try to click on the items listed below:

  • Smashing Magazine
  • Woork Up
  • Mashable

This effect is very simple to implement using the jQuery toggleClass() method. This method adds to the selected element a specified class if it is not present and removes the specified class if it is present. In this example I created the following class to highlight a selected item:

.selected{background:#ffffcc;}

Here is the HTML code, a simple ul list with the class attribute set to selectList:

<ul class="selectList">
    <li>Smashing Magazine</li>
    <li>Woork Up</li>
    <li>Mashable</li>
</ul>

Here is the javascript code that uses the toggleClass() method:

$(document).ready(function() {
  $(".selectList li").click(function (){
    $(this).toggleClass('selected');
  })
});

In this way you can apply this effect to all li elements contained into an ul list with the class attribute set to .selectList.

Highlight content with animation

This example illustrates how to improve the previous effect adding a custom animation when an element is selected. Here is the result (click on a item below):

  • Smashing Magazine
  • Woork Up
  • Mashable

The HTML code is the same of the previous example: an ul list with the class attribute set to selectList. Here is the javascript code:

$(document).ready(function() {
  $(".selectList li").click(function (){
    $(this).toggleClass('selected');
    margin = $(this).css('margin-left');
    if(margin=='0px'){
      leftmargin='20px';
    } else {
      leftmargin='0px';
    }
    $(this).animate({ 
      marginLeft: leftmargin,
    }, 400 );
  })
});

I used animate() to animate the selected item. Take a look at this lesson about the animate() method.

Animated expandable sections

This example illustrates how to implement expandable sections using hasClass() and slideToggle() methods. In particular, hasClass() checks the current selection against a class and returns true if at least one element of the selection has the given class. Take a look at the following example and click on “About Us” or “Popular Now”:

About Us
Woork Up is a web community about Web Design, Tech News and Digital Inspiration with tutorials, code snippets, reviews of products and services for web designers and developers, and daily fresh news provided by users.


Now Popular

Here is the CSS code:

.expand-header{
  background:url(pic/plus.gif) #DFDFDF no-repeat; 
  cursor:pointer;
}
.expand-header-no{
  background:url(pic/minus.gif) #DFDFDF no-repeat 4px 4px; 
  cursor:pointer;
}

Here is the HTML code:

<div class="expand-header-no" id="e1">About Us</div>
<div class="expand" id="e1-s">
HTML code here...
</div>

<div class="expand-header-no" id="e2">Popular Now</div>
<div class="expand" id="e2-s">
HTML code here...
</div>

Here is the JavaScript code:

$("div[class^='expand-header']").click(function (){
  if($(this).hasClass('expand-header-no')){
    $(this).removeClass('expand-header-no');
    $(this).addClass("expand-header");
  } else {
    $(this).removeClass('expand-header');
    $(this).addClass("expand-header-no");
  }
  el = $(this).attr("id");
  el = el+"-s";
  $("#"+el).slideToggle(300);
});

In this example I also used the addClass() and removeClass() methods to add/remove the specified class (expand-header or expand-header-no) to each matched element.

The selector $("div[class^='expand-header']") matches all elements with the class attribute that starts with "expand-header".

Check box list simulation

In this example I used addClass() and removeClass() methods to simulate a check box list (try to click on an item to select it):

  • Smashing Magazine
  • Woork Up
  • Mashable
  • TechCrunch

To implement this effect you have to create two CSS class .unchecked and .checked that represent the checked and unchecked status:

.unchecked{
    background:url(ui-radio-button-uncheck.png) no-repeat; 
    padding-left: 20px; 
    cursor:pointer;
}
.checked{
    background:url(pic/ui-radio-button.png) no-repeat; 
    padding-left: 20px; 
    font-weight: bold;
}

Here is the HTML code:

<ul class="checkboxList">
  <li class="unchecked">Smashing Magazine</li>
  <li class="unchecked">Woork Up</li>
  <li class="unchecked">Mashable</li>
  <li class="unchecked">TechCrunch</li>
</ul>

Here is the JavaScript code:


$(".checkboxList li").click(function (){
  if($(this).hasClass('unchecked')){
    $(this).removeClass('unchecked');
    $(this).addClass('checked');
  } else {
    $(this).removeClass('checked');
    $(this).addClass('unchecked');
  }
});

That’s all for this lesson! If you have suggestions or specific requests for the next lesson leave a comment. For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.