Simple jQuery Tabbed Content

Goal: Produce a simple, small script which gracefully degrades without JavaScript.

Note: The HTML below is pulled from a Zope Page Template (with embedded Python), but the code should be easy to dissect.

HTML

<div id="tabbed-content" tal:define="currentTab request/tab|string:cabinets">
    <div class="tabs-wrapper">
        <ul class="tabs">
            <li tal:attributes="class python: test(request.get('tab','') in ['cabinets', ''], 'selected', '')">
              <a href="?tab=cabinets#content" id="tab-cabinets">Cabinets</a>
            </li>
            <li tal:attributes="class python: test(request.get('tab','') == 'gallery', 'selected', '')">
              <a href="?tab=gallery#content" id="tab-gallery">Gallery</a>
            </li>
            <li tal:attributes="class python: test(request.get('tab','') == 'specs', 'selected', '')">
              <a href="?tab=specs#content" id="tab-specs">Specifications</a>
            </li>
        </ul>
        <div class="visualClear"><!-- --></div>
    </div>
    <div id="cabinets" class="tab-body" tal:attributes="class python: test(currentTab == 'cabinets', 'tab-body', 'tab-body initial-hide')">
       content here...
    </div>
    <div id="gallery" class="tab-body" tal:attributes="class python: test(currentTab == 'gallery', 'tab-body', 'tab-body initial-hide')">
       content here...
    </div>
    <div id="specs" class="tab-body" tal:attributes="class python: test(currentTab == 'specs', 'tab-body', 'tab-body initial-hide')">
       content here...
    </div>
</div>

CSS

.tabs-wrapper { margin-bottom: 1em; border-bottom: 1px solid #bbb; }
.tabs { margin: 0 !important; padding: 7px 0 0 8px; list-style-type: none; list-style-image: none; }
.tabs li { float: left; display: block; margin: 0 5px -1px 0; padding: 0; font-size: 12px; }
.tabs li a { padding: 3px 8px 1px 8px; font-weight: bold; color: #444 !important; outline: none !important;
                                       border: 1px solid #e0e0e0; border-radius: 5px 5px 0 0; background: #e0e0e0; }
.tabs li.selected { position: relative; margin-top: -2px; top: 2px; }
.tabs li.selected a { padding-bottom: 3px; border: 1px solid #bbb; border-bottom: 0; background: #fff; }
.initial-hide { display: none; }
.visualClear { clear: both; }

jQuery

$('.tabs a').click(function() {
    var activateId = jq(this).attr('id').substring(4); // get id of tab "body"
    $(this).parent().siblings().removeClass('selected');
    $(this).parent().addClass('selected');
   
    $(this).parent().parent().parent().siblings().hide(); // hide all tab bodies
    $('#' + activateId).show(); // show only the selected tab body
    return false;
});   

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs


Tagged .

Updated: 2011-07-29

Phil LaNasa follow us in feedly