jQuery UI tabs inside a Drupal node

Following up on my previous post about collapsible fieldsets in drupal 7 nodes I recently wanted to just add some jQuery UI tabs to another node, and taking inspiration from my previous post about collapsible fieldsets in Drupal 7 nodes, made a little few edits to the template.php to achieve this as well. I actually made this to display vertical tabs from jquery ui, which is why the ui-tabs-vertical class has been added to the JavaScript, so if you don’t want that then just remove it. Also as an event I have used mouseover, which you can change if you require.

Add this into your template.php file within your theme (renaming THEMENAME to the name of your theme):

function THEMENAME_preprocess_html(&$variables){
// This function looks for node 1 and only adds the javascript for this.
// However it can be extended in different ways if required
    drupal_add_library('system', 'ui.tabs');
    drupal_add_js('
      jQuery(document).ready(function(){
        jQuery("#tabs").tabs({event: "mouseover"});
        jQuery("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        jQuery("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");',
      'inline');
}

Make your html like this (making sure you are able to type full html (not filtered html)):

<div id="tabs">
<div id="tab-list">
  <ul>
  <li><a href="#tabs-1">Tab 1 Title</a></li>
  <li><a href="#tabs-2">Tab 2 Title</a></li>
  <li><a href="#tabs-3">Tab 3 Title</a></li>
  </ul>
</div>
<div id="tab-content">    
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque.</p>
  </div>
</div>
</div>

jQuery UI tabs inside a Drupal node

Tags

Get in contact.