Jquery Tabs Without Jquery UI

Here is a compact way to replicate jQuery UI tabs without the UI. I wrote this code to account for unlimited tabs and to create dynamic "selected" class on the clicked item and removes the class when you click on another tab. This lends itself to easier styling of the tabs as well. It also degrades to show all the content if javascript is disabled. View Demo Here is the HTML Markup You can start any of the LIs with class="selected" to have that tab start as the selected item. The tab navigation is set up in the javascript. This way, if javascript is disabled the tabs go away and all the content in the tabs is displayed. Thanks to Kyle Geminden for this.

here is some content for tab 1
here is some content for tab 2
here is some content for tab 3

Here is the CSS You can change the last line here to match the LI that you want to display by default

#tabs { margin: 0; padding: 0; list-style-type: none; overflow: hidden; }
#tabs li { cursor: pointer; float: left; margin: 5px; padding: 5px; background: #EFEFEF; }
#tabs li.selected { background: #888888; }
#tabs-content { clear: both; }
#tabs-content.js > div { display: none; }
#tabs-content.js > #tab-content-1 { display: block; }

Here is the Javascript/jQuery

<ul id="tabs">
<li id="tab-1" class="selected">Tab 1</li>
<li id="tab-2">Tab 2</li>
<li id="tab-3">Tab 3</li>
        $("#tabs li").each(function() {
                $(this).click(function() {
                        var tabId = $(this).attr('id');
                        var tabId = tabId.split('-');
                        var tabContent = document.getElementById('tab-content-' + tabId[1]);
                        tabContent.style.display = 'block';

UPDATE - March 25. 2012

So I have been asked to provide code that makes these tabs bookmarkable. Well...here it is! In order to get these to be bookmarked, I make up a $_GET variable that is specific to these tabs. So after the normal tab js code if you put this and the url is http://domain.com/?tab=1 this will overwrite the tab function and highlight the one you want. see: View Revised Demo there are direct links on this page to the tabs

if ( getQueryString('tab') != '' ) {
        // get the value of the query string var called "tab"
        var tab = getQueryString('tab');
        // remove all the "selected" classes from the LIs
        $('#tabs li').each(function() { $(this).removeClass(); });
        // based off of the tab in the query string, readd the "selected" class back to the appropriate tab
        $('#tabs li#tab-' + tab).addClass('selected');
        // hide all of the content divs
        $('#tabs-content > div').css({'display':'none'});
        // based off of the tab in the query string, make the selected tab visible
        $('#tabs-content #tab-content-' + tab).css({'display':'block'});

WHERE getQueryString(); is the function below

// http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
function getQueryString(key, default_) {
        if (default_==null) default_="";
        key = key.replace(/[[]/,"[").replace(/[]]/,"]");
        var regex = new RegExp("[?&]"+key+"=([^&#]*)");
        var qs = regex.exec(window.location.href);
        if(qs == null)
                return default_;
                return qs[1];
Post a comment
  1. zoldos

    Do I need any libraries from Jquery to make this work?

    • Matthew Price

      Yes. You need to load jQuery. This is a demo that does not require jQuery UI. The reason why i wrote this was because the only reason i would have needed jQuery UI was for their tabs and i didn't want to load extra JS or CSS files for one piece of the jQuery UI Library. I know that you can download custom JS and CSS that only includes the pieces you need, but it is still two more requests to the server. Matt

      • zoldos

        k, this might be why it isn't work. So I just load the base Jquery libraries? Can you show me that code? Thanks!

        • Matthew Price

          you can use this code from google's CDN. https://developers.google.com/speed/libraries/devguide#jquery It allows you to pick a version number, or just load the most recent. You can also download it here and load it off of the local machine: http://jquery.com/download/

          • zoldos

            Great, thanks! And one last question, how do I implement the Jquery "no conflict" mode with your script? I noticed when trying to use other Jquery based scripts, certain parts of my site ceased to function and someone mentioned no conflict mode when I searched for a solution.

            • Matthew Price

              Hi So instead of using this: $('.div').show(); // or whatever method you are using... use this: jQuery('.div').show(); Matt

  2. asdf

    I thought this was without jquery alltogether, misleading

    • Matthew Price

      So i am not sure as to what part of this you think is not using jQuery... it uses jQuery while not using jQuery UI Tabs Please read before you post

  3. Sitalõug

    Do you have an working example?

    • Matthew Price

      hi thanks for alerting me that the demo wasn't working. it is now completely functional http://matthewaprice.com/jquery-tab-demo/

Real Time Web Analytics ^