Advanced Search

Drupal jquery tabset

/ Published in: HTML
Save to your folder(s)
Say you wanted the following 4 tabs: bodoni, helvetica, frutiger, univers, each outputting a separate block view of 3 teasers each. This is what your markup would look like:

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div class="drupal-tabs">
  2.       <!-- These are the actual tab labels. They are always visible, the current tab's a will have an 'active' class  -->
  3.       <ul class="anchors">
  4.         <li><a href="#bodoni">Bodoni</a></li>
  5.         <li><a href="#frutiger">Frutiger</a></li>
  6.         <li><a href="#helvetica">Helvetica</a></li>
  7.         <li><a href="#univers">Univers</a></li>
  8.       </ul>
  9.       <!-- These are the individual tabs. All but the currently selected tab will be hidden -->
  10.       <div id="bodoni">
  11.         <?php print $bodoni ?>
  12.       </div>
  13.       <div id="frutiger">
  14.         <?php print $frutiger ?>
  15.       </div>
  16.       <div id="helvetica">
  17.         <?php print $helvetica ?>
  18.       </div>
  19.       <div id="univers">
  20.         <?php print $univers ?>
  21.       </div>
  22.     </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.