I need to create a tabbed menu on a Drupal website. The drupal installation is a good ould Drupal 4.7. In order to create tabbed menu I use tabify plugin for Jquery. The problem is that I cannot get it working. It seems that the Jquery doesn't load. I put the code (below) on the website where I would like to have the menu. It didnt work. Then I put it on the main drupal page and on every template file. Not working either. What is the cause of that? Any advice appreciated. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.tabify-1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$('#tabbed_menu').tabify();
});
// ]]>
</script>
<ul id="tabbed_menu">
<li class="active"><a href="#description">Treatment</a></li>
<li><a href="#usage">Prices</a></li>
<li><a href="#download">FAQ</a></li>
</ul>
<div id="description" class="content">
some text
</div>
<div id="usage" class="content">
<h2>Prices</h2>
some text
</div>
<div id="download" class="content">
some text
</div>
And CSS:
#tabbed_menu{ padding: 0;}#tabbed_menu LI{ display: inline;}#tabbed_menu LI A{ background: #EDF; padding: 10px; float: left; border-right: 1px solid #CCF; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}#tabbed_menu LI.active A{ background: #E07; color: #FFFFFF;}.content_tabbed{ float: left; clear: both; border: 1px solid #CCF; border-top: 1px solid #CCF; border-left: 1px solid #CCF; background: #FFF; padding: 10px 20px 20px; width: 100%; border-bottom: 1px solid #CCF;}
its because the jquery u have loaded on is the core jquery, u need the jquery ui :) and make sure that
<script>
is above other codes where you call the tabify, :)