advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

zachharkey on 02/18/08


Tagged

jquery drupal tabset


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

basicmagic


Drupal jquery tabset

Published in: HTML 

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:

Plain TextExpand 
  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 

You need to login to post a comment.