jQuery tabs improvement I've written a small function which displays a div related to an anchor element using data attributes.
The data attribute is used to match the class of the relevant div which is then displayed whilst the others are hidden.
All very basic, however I'm wondering if there is anyway to improve it? Is there a better solution than using the data attribute? Any best practices?
$(&quot;.tabs li a&quot;).click(function() {
    var cssClass = &quot;.&quot; + $(this).data(&quot;class&quot;);

    // Add active class to current tab, remove from siblings
    $(this).addClass(&quot;active&quot;).parent().siblings().find(&quot;a&quot;).removeClass(&quot;active&quot;);

    // Find the associated content and show it, hide its siblings
    $(&quot;.tabs-content&quot;).find(cssClass).show().siblings().hide();

    return false;
});

jsfiddle example here

Edit
This ended up being re-written for production using classes instead of data attributes, like so:
$(&quot;.tabs li a&quot;).click(function() {
    var cssClass = &quot;.&quot; + $(this).attr(&quot;class&quot;);
    
    $('.tabs a.active').removeClass(&quot;active&quot;); // Find the previously active tab and remove it
    $(this).addClass(&quot;active&quot;);                // Add active class to current tab
    $(&quot;.tabs-content&quot;).find('&gt; div').hide();   // Hide the all tab divs
    $(&quot;.tabs-content&quot;).find(cssClass).show()   // Find the associated div and display it
    
    return false;
});​

Updated jsfiddle
$(".tabs-content").find(cssClass).show().siblings().hide(); is confusing and not easy to read.

Otherwise it seems to be working. As for best practices:


Make sure your content is accessible to non JS users, such as search engines or browsers without JS.
Consider using the Bootstrap tab plugin or jQuery UI tab functionality. Of course if you don't already use one of those, keep your simple jQuery function.