By Thremulant on

I am trying to add this jQuery Tabs to my nodes in Drupal 6.x, so the user can paste a text in a CCK Field and it will render it in a Tab. So I made this try:

1. page.tpl.php: in the header will be

<header>
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
</header>

2. in my node-content.tpl.php: here in the body will be the HTML and the script:

<ul class="tabs">
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>
<div class="panes">
    <div style="display: block;"><?php $field_1 ?></div>
    <div style="display: none;"><?php $field_2 ?></div>
    <div style="display: none;"><?php $field_3 ?></div>
</div>
<script>
    function() {
        $("ul.tabs").tabs("div.panes > div");
    };
</script>

3. CSS: this is the only thing working so far.

Has anyone a suggestion of why it is not working???

Thanks.

⋅ Categories: Drupal 6.x

Comments

harriszrashid’s picture

harriszrashid commented

Hi Neiddesign,

Try to add document ready to you javascript:

<script>
$(document).ready(function(){
        $("ul.tabs").tabs("div.panes > div");
});
</script>

Let me know if it still doesn't work.

Thremulant’s picture

Thremulant commented

Hi Harris, actually it did not work, so I search for more options, and with this:

	<script type="text/javascript" type="text/javascript">
		$(document).ready(function(){
		  $("ul.tabs").tabs(".pane");
		});
	</script>
----------------------------
<ul>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
</ul>

<div class="panel">
<div class="pane"><a href="#">tab1</a></div>
<div class="pane"><a href="#">tab2</a></div>
</div>

is working fine, do not know for how long but now is fine, thanks for the answer!!

harriszrashid’s picture

harriszrashid commented

No problemo!