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.
This is text that is initially selected. |
but you can select this too |
or if you wanna go crazy, select this! |
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.
This is text that is initially selected. |
but you can select this too |
or if you wanna go crazy, select this! |
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:
< span >This is text that is initially selected.</ span > |
< span >but you can select this too</ span > |
Google AJAX API is awesome. |
< span >or if you wanna go crazy, select this!</ span > |
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" ); |
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.
I hope you find it useful, see you next time.
You might want to check these related posts:
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.
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”);
});
}
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”!
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….
¡Awesome! ¡Thanks!
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?
Rather, I meant to say: “…but NOT REMOVED from previously selected tabs…”
cool … this helped me :*
I’ve published a new code for rotating jQuery tabs featuring selection.
la variante Ideal
nice and easy to use your code