Posted By

zachharkey on 02/18/08


Tagged

jquery drupal tabset


Versions (?)

Who likes this?

1 person have 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:

  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.