I have the following jQuery script on my site to switch tabs without reloading the page. I'm using jQuery core v1.3.2 (NOT jQuery UI)
<!-- JS -->
<script type="text/javascript">
$(function() {
var tabify = function () {
var id = $('#content > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('id');
$('#content > ul > li').removeClass('selected').find('a[href=#' + id + ']').parent().addClass('selected');
}
setInterval(tabify, 100);
tabify();
});
</script>
<!-- HTML -->
<div id="content">
<ul>
<li><a href="#blog" role="tab">Blog</a></li>
<li><a href="#videos" role="tab">Videos</a></li>
<li><a href="#photos" role="tab">Photos</a></li>
</ul>
<div id="blog" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Blog Content</div>
<div id="videos" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Videos Content</div>
<div id="photos" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">Photos Content</div>
</div>
I want to add another instance of this script on the same page, but just copy/pasting this with different variable names doesn't work. Any ideas?
EDIT: Here is my HTML and JS for the second instance. The problem is when I click on a tab in the second instance, it hides all the content divs in the first instance, and vice versa. I want them to be independent of one another.
<!-- JS -->
<script type="text/javascript">
$(function() {
var tabifyplayer = function () {
var idplayer = $('#discography > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('idplayer');
$('#discography > ul > li').removeClass('selected').find('a[href=#' + idplayer + ']').parent().addClass('selected');
}
setInterval(tabifyplayer, 100);
tabifyplayer();
});
</script>
<!-- HTML -->
<div id="discography">
<ul>
<li><a href="#cor-player" role="tab">Chance of Rain (2009)</a></li>
<li><a href="#debutcd-player" role="tab">Debut CD (2007)</a></li>
</ul>
<div id="cor-player" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Content Goes Here</div>
<div id="debutcd-player" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Content Goes Here</div>
</div>