implement tabs in node page

Created on 18 February 2011, over 13 years ago
Updated 8 May 2023, about 1 year ago

I want to implement tabs within a Node Page. I tried Quicktabs but neither the ajax nor the non-ajax modes are my cup of tea... I like jQuery Tab's way of hiding/unhiding block elements. Thus Tabs module is the best option (I could also be using jQuery UI's plugin from scratch but it feels redundant to do so since I alreade have Tabs module installed).

so far, I've called the script functions and coded the html for the tabs:

<?php
drupal_add_js(drupal_get_path('module', 'tabs') .'/ui.core.js');
drupal_add_js(drupal_get_path('module', 'tabs') .'/ui.tabs.js');
drupal_add_js(drupal_get_path('module', 'tabs') .'/tabs.js');
?>
<div id="tabs-demo">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.</p>
	</div>
</div>
<script>
$(function() {
	$('#tabs-demo').tabs();
});
</script>

I get a JS error:

Drupal.settings.tabs is undefined
    var fx = {duration: Drupal.settings.tabs.speed}; 

In the /tabs.js file...
If I get rid of the call to that file, the error disappears but the tabs don't work either.

I've been trying to find how to do this for two weeks now and just can't find a solution, and deadline is here. I could really use a tip.

πŸ’¬ Support request
Status

Active

Version

1.3

Component

Miscellaneous

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

No activities found.

Production build 0.69.0 2024