Question

My issue is that I cannot get my tabs to show my data using the javascript that I wrote. It will show on page load(the default action) but will not display any of the tab_content when i use the navigation.

The Javascript

$(document).ready(function() {

  //Default Action

  $(".tab_content").hide(); //Hide all content
  $("dl.tabs dd:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("dl.tabs dd").click(function(event) {
    event.preventDefault();
      $("dl.tabs dd").removeClass("active"); //Remove any "active" class
      $(this).addClass("active"); //Add "active" class to selected tab
      $(".tab_content").hide(); //Hide all tab content
      var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active content
      return false;
  });
});

The HTML

<div class="six columns">
  <div class="panel">
    <dl class="nice vertical tabs">
        <dd><a id="(dynamic id)">(tab name)</a><dd>
        <dd><a id="(dynamic id)">(tab name)</a><dd>
        <dd><a id="(dynamic id)">(tab name)</a><dd>
    </dl>
  </div>
</div>

<div class="six columns">
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
</div>

Answer 1

Your code basically will work once you fix mismatch of class name tab_content vs tabs_content and include href in your A tags. There currently is no href for code to lookup

The href needs to be in format “#idValue”

I made these 2 changes and here is working demo

http://jsfiddle.net/WFW6k/1/