jquery operate

How to select and reveal elements with jQuery

One user asked the other day on the jQuery Tabs tutorial how to highlight the particular tab we selected. In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content. See the three examples and read on.

Basic Selection

First things first, we will select an item, deselect it, we won’t worry about the other elements. In this case the markup is a simple list.

<ul id="block">
 <li class="selected">
   This is text  that is initially selected.
 </li>
 <li>
   but you can select this too
 </li>
 <li>
   or if you wanna go crazy, select this!
 </li>
</ul>

We will leave the matter of avoiding multiple selections for the final example. For now, this is as simple as adding and removing a class, or in jQuery, toggling a class.

jQuery("#block li").click(function(){
jQuery(this).toggleClass("selected");
 });

The .selected class looks like this

.selected { color: #f70; }

Done. This basic selection example is really easy but it’s not very useful. Let’s see how to provide your users some kind of important extra information like “You selected this.”

Multiple selection revealing content

This version has the same markup but we will be adding an extra paragraph inside the li element to add some feedback for the user. The p elements that are meant to remain invisible will be given an .invisible class.

<li class="selected">
 This is text  that is initially selected.
 <p>
 You selected this.
 </p>
 </li>
 <li>
 but you can select this too
 <p class="invisible">
 You selected this.
 </p>
 </li>
 <li>
 or if you wanna go crazy, select this!
 <p class="invisible">
 You selected this.
 </p>
 </li>

The .invisible class has only this:

.invisible { display:none; }

Now our JS in addition to toggle the class will have to toggle the invisible class for the child p elements. We add the following right after toggling the selected class.

jQuery(this).children("p").toggleClass("invisible");

So this is what we get with the multiple selection revealing content.

Single selection revealing content

Our final example is an exclusive selection. We won’t be able to select two elements. This isn’t limited to a small list selection. You could hide and reveal large areas of your site or you could apply it to the former jQuery Tabs to highlight the tab you’re currently in. We will achieve this highlighting only the title instead of the whole element content like the previous example.

The markup is almost the same but we will wrap the li text with a span element:

<li>
 <span>This is text  that is initially selected.</span>
 <p>
 jQuery is awesome.
 </p>
 </li>
 <li>
 <span>but you can select this too</span>
 <p>
 Google AJAX API is awesome.
 </p>
 </li>
 <li>
 <span>or if you wanna go crazy, select this!</span>
 <p>
 Web develop is great!.
 </p>
 </li>

On the JS we will now store the currently selected li element for later use:

var current = jQuery("#block li:first");
 jQuery("#block li").click(function(){
 
 current.children("span").removeClass("selected");
 current.children("p").addClass("invisible");
 
 jQuery(this).children("span").addClass("selected");
 jQuery(this).children("p").removeClass("invisible");
 
 current = jQuery(this);
 });

We will remove first the .selected classs from the span of the former item and hide its p element. Then we will add the .selected class to the current item and reveal its p element. Done. This is all you need to create and exclusive selection with jQuery.

You can download the file for closer inspection.

Download jQuery Reveal and Select

I hope you find it useful, see you next time.

Liked this? buy me a coffee so I can stay awake doing more things like this.

Spread the word, share this post

Tags: javascript, resources, tutorials, usability

Posted on Friday, July 17th, 2009 in jQuery.

“How to select and reveal elements with jQuery” received 10 comments! Add yours.

Elliot July 23rd, 2009
GC Browne, you send me a queston through the contact form. You can load your own jQuery, instead of using Google’s hosted one, by adding jQuery to the xhtml page and then calling the functions inside a jQuery(document).ready, like this
jQuery(document).ready(function(){
jQuery(“#block li”).click(function(){
jQuery(this).toggleClass(“selected”);
});
}
Webstandard-Team July 28th, 2009
Nice small jQuery-Tutorial! If you are interested in more jQuery, you don’t have to miss the following two articles: “Creative Image-Galleries by jQuery” or “Webdesign inspired by jQuery and Twitter”!
You are now listed on FAQPAL August 8th, 2009
How to select and reveal elements with jQuery…

In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content….
Luciano September 30th, 2009
¡Awesome! ¡Thanks!
Pariah Burke October 3rd, 2009
Great tutorials, Elliot, but I can’t seem to figure out how to integrate the Single selection revealing content with your jQuery tabs. I can get the .selected class added to every new tab, but REMOVED from previously selected tabs. Could you please post the code of your jQuery Tabs using the .selected add and remove technique?
Pariah Burke October 6th, 2009
Rather, I meant to say: “…but NOT REMOVED from previously selected tabs…”
Michel November 24th, 2009
cool … this helped me :*
Elliot December 8th, 2009
I’ve published a new code for rotating jQuery tabs featuring selection.
learkickfoxp January 5th, 2010
la variante Ideal
coilover shock May 5th, 2010
nice and easy to use your code