JQuery tabs system

Wrote this script and it all seems ok to me but for some reason jquery doesnt want to work. Been trying to get this to work for ages with no luck. If you wouldnt mind could you skim over it for me. I apologise if i am missing something simple but my eyes are glazed now lol.

heres the html & php

<ul class="tabs">
     <li class=""><a href="#about">About</a></li>
        <li class=""><a href="#contact">Contact <?php echo $retailers['Retailer']['company'];?></a></li>
 </ul>
    <div class="tab_container">
  <div id="about" class="tab_content">
         <h3>About <?php echo $retailers['Retailer']['company'];?></h3>
            <p><?php echo $retailers['Retailer']['description'];?></p>
  </div>
  <div id="contact" class="tab_content">
         <h3>Contact <?php echo $retailers['Retailer']['company'];?></h3>
            <h4>Email <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['email_address'];?></p>
            <h4>Phone <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['phone'];?></p>
            <h4>Fax <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['fax'];?></p>
            <h4>Write to <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['address_line_1'];?>,<br /><?php echo $retailers['Retailer']['address_line_2'];?>,<br /><?php echo $retailers['Retailer']['city'];?>,<br /><?php echo $retailers['Retailer']['county'];?>,<br /><?php echo $retailers['Retailer']['postcode'];?></p>
  </div> 
    </div> 

Heres the jquery:

<script type="text/javascript" language="javascript">
$(document).ready(function() {

 //Default Action
 $(".tab_content").hide();  
 $("ul.tabs li:first").addClass("active").show();  
 $(".tab_content:first").show(); 

 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); 
  $(this).addClass("active"); 
  $(".tab_content").hide();  
  var activeTab = $(this).find("a").attr("href");  
  $(activeTab).fadeIn(); 
  return false;
 });
}); 
</script>

Sorry cant give you all a link but its on loc开发者_运维百科al machine.

Thanks folks

Jamie

I suggest you take a look at the offictal jQuery UI documentation, in particular the tabs page. I think your markup has some errors, this is how I would do this:

<div id="tabs_container">
<ul>
    <li class=""><a href="#about">About</a></li>
    <li class=""><a href="#contact">Contact <?php echo $retailers['Retailer']['company'];?></a></li>
</ul>
  <div id="about" class="tab_content">
         <h3>About <?php echo $retailers['Retailer']['company'];?></h3>
            <p><?php echo $retailers['Retailer']['description'];?></p>
  </div>
  <div id="contact" class="tab_content">
         <h3>Contact <?php echo $retailers['Retailer']['company'];?></h3>
            <h4>Email <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['email_address'];?></p>
            <h4>Phone <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['phone'];?></p>
            <h4>Fax <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['fax'];?></p>
            <h4>Write to <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['address_line_1'];?>,<br /><?php echo  $retailers['Retailer']['address_line_2'];?>,<br /><?php echo $retailers['Retailer']['city'];?>,<br /><?php echo $retailers['Retailer']['county'];?>,<br /><?php echo $retailers['Retailer']['postcode'];?></p>
  </div> 

You need a div which contains all the tab divs AND the list with the various links, you missed this in your code. Then in your jQuery code you're missing a call to .tabs() which effectively creates the tabs. Here is how you would do this assuming you where using the previous markup I posted:

$('#tabs_container').tabs()