Content not loading in tabs

[kaosjon]

Hi i am having a little trouble with my jquery tabs, for some reason it loads the first tab content, but when i select another tab the content is not displayed. When i try to go back to the first tab it doesnt load either.

Here is the html

<div id="content">
<div id="tabsX">
  <div id="tabContent">
  <ul class="tabs">
    <li><a id="all" href="#all" class="all">All</a></li>
    <li><a id="free" href="#free" class="free">Free</a></li>
    <li><a id="paid" href="#paid" class="paid">Paid</a></li>
    <li><a id="completed" href="#completed" class="completed">Completed</a></li>
    
    <div id="filter"><select name="filterQuest">
      <option>Name</option>
      <option>Payout</option>
      <option>Difficulty</option>
    </select></div>
  </ul>


<div class="tab_container">
    <div id="all" class="tab_content">
        asddd
    </div>
    <div id="free" class="tab_content">
       <!--Content-->adadada
    </div>
    <div id="paid" class="tab_content">
       <!--Content-->adad
    </div>
    <div id="completed" class="tab_content">
       <!--Content-->adsasd
    </div>
    
</div><!--- end tab_container--->
  </div><!---end tab content--->
  <br class="clear" />
</div><!--- end tabsX--->
<div id="tournament"></div><!--- end tournament--->
</div><!--- end content--->

Here is the javascript

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").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;
	});

});
</script>

And here is the css

@charset "utf-8";
/* CSS Document */

ul.tabs {
	padding: 0;
	float: left;
	list-style: none;
	height: 56px;
	width: 100%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-bottom-width: 1px;
	border-bottom-style: ridge;
	border-bottom-color: #999;
	position:relative;
	
	
}
#tabsX {
	width: 800px;
	padding-left: 20px;
	float: left;
}
#tabsX .clear {
	clear: both;
}



ul.tabs li {
	float: left;
	padding: 0;
	height: 55px;
	line-height: 53px;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	margin-top: 0px;
	margin-right: 20px;
	margin-left: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	
	
}
ul.tabs li a {
	text-decoration: none;
	color: #333;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	outline: none;
	position:relative;
	
}
/*ul.tabs li a:hover {
	color: #9C3;
	text-transform: none;
}*/
html ul.tabs li.active a.all,
ul.tabs li  a.all:hover {
	color: #999;
	text-transform: none;
	border-bottom-width: thick;
	border-bottom-style: ridge;
	border-bottom-color: #999;
}
html ul.tabs li.active a.free,
ul.tabs li  a.free:hover {
	color: #7ED200;
	text-transform: none;
	border-bottom-width: thick;
	border-bottom-style: ridge;
	border-bottom-color: #7ED200;
}	
html ul.tabs li.active a.paid,
ul.tabs li  a.paid:hover {
	color: #CB0C01;
	text-transform: none;
	border-bottom-width: thick;
	border-bottom-style: ridge;
	border-bottom-color: #E40D01;	
}
html ul.tabs li.active a.completed, 	
ul.tabs li  a.completed:hover {
	color: #06C;
	text-transform: none;
	border-bottom-width: thick;
	border-bottom-style: ridge;
	border-bottom-color: #06C;
}

.tab_container {
	clear: both;
	/*float: left;*/
	width: 100%;
	border-right: 1px ridge #999;
	margin-bottom: 20px;
	min-height: 930px;
	
}
.tab_content {
	padding: 20px;
}

.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}
#tabContent #filter {
	float: right;
	margin-top: 17px;
	margin-right: 50px;
}

Thanks for the help

[niranga]

I think the problem is with the id values. You can not have multiple elements with the same id.
I am talking about <a> and <div> elements

<a id="all" href="#all" class="all">All</a>

and..

<div id="all" class="tab_content">
asddd
</div>

Try using a common prefix string in div id values

<div id="div_all" class="tab_content">
asddd
</div>

Then change the href values of the <a> tags to relevant <div> id values

<a id="all" href="#div_all" class="all">All</a>

[kaosjon]

Hi i managed to use your ideas and found the solution by removing the id="all" from the lists

[niranga]

Good :)