Response title
This is preview!
jquery tabs - setting list to display depending on class of body tag
in Getting Started
•
11 years ago
Hi, hoping someone can help.
I'm working on a site where we display two lists of boats, sail or power via the organic tabs plugin.
Now, our client wants us to show one list type by default depending on the class of the body tag - for example, if the user was on a sailing boat page, the body would have a class of 'sailPage' and therefore the list that would be shown by default would be the 'sail list' - and vice versa for the power (although be default this one shows first anyways as it is the first 'panel' in the HTML')
In my admittedly rather clumsy way, I've written the following jQuery function which does seem to work (well, the first half) - however when the user clicks back on to the 'power' tab whilst on page with a class of 'sail', the power list doesn't display. There also seems to be a problem in IE7 where the content of the lists will not display until you select the other tab first, and then select the second tab again?
Any pointers would be great - and also if anyone has any suggestions of how to neaten up the jQuery that would be appreciated too.
<div id="sailOrPower">
<ul class="nav">
<li class="nav-one"><a href="#panel1" class="current">Top Power</a></li>
<li class="nav-two"><a href="#panel2">Top Sail</a></li>
</ul>
<div class="listWrap">
<h3><strong>Top Boats</strong><br />
by manufacturer</h3>
<ul id="panel1">
<li><a href="#">View full list</a></li>
<li><a href="#">Power boat 1</a></li>
<li><a href="#">Power boat 1</a></li>
</ul>
<ul id="panel2" class="hide">
<li><a href="#">View full list</a></li>
<li><a href="#">Sail boat 1</a></li>
<li><a href="#">Sail boat 1</a></li>
</ul>
</div>
$function() {
var $body = $('body');
var $listItem = $('#sailOrPower ul.nav li.nav-one a')
if ($body.is('.sailPage')) {
$('#sailOrPower ul.nav li.nav-one a').removeClass('current')
$('#sailOrPower ul.nav li.nav-two a').addClass('current')
$('#sailOrPower .listWrap ul#panel1').addClass('hide')
$('#sailOrPower .listWrap ul#panel2').css('display', 'block')
}
else if ($body.is('.sailPage') + $listItem.is('.current')) {
$('#sailOrPower .listWrap ul#panel1').removeClass('hide')
$('#sailOrPower .listWrap ul#panel1').css('display', 'block')
}
});
1