I have a jQuery tab section with several div sections for it. There is a link for each section at the top of the whole thing, but I'd like to have those same links in the div that displays content when the page first loads as well. Basically, two different ways to get to the hidden divs. I tried to just copy the link at the top, but it doesn't seem to work if I add more than one of the same link. Would I need to add another name for each link?
Here's the code for the tabbed section:
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
});
Here's the HTML:
<a href="#" name="section1">Link One</a>
<a href="#" name="section2">Link Two</a>
<br><br>
<div id="section1">
My text and information goes here. <<ALSO WANT A LINK HERE TO OPEN THE SECOND DIV BELOW>>
</div>
<div id="section2">
My text and information goes here.
</div>