Steve Price Steve Price - 5 months ago 15
jQuery Question

Triggering a show/hide from existing jscript when specific tabs are clicked

I have the following script in a php page that contains tabbed output

<script>
$(document).ready(function () {
$('#horizontalTab').ProductTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>


If i put the following code in the html, it tells me the name of the tab that is currently open

<div id="tabInfo">
Selected tab: <span class="tabName"></span>
</div>


What I'm trying to figure out is how I can use whatever is giving the tab name to the span class to trigger a show or hide like

$('.pricefields td').hide();


JS is not my field at all, but looking at the initial script I'm guessing its related to var $info and var $name, but I don't have enough understanding to work out how to use those in a sort of if tabName == Tab1 then hide this td way.

I did try adding the following to the script, but the td still shows on all tabs. If I add the $('.pricefields td').hide(); without the if statement it hides, so I know the hide command is using the correct identifier.

if ($info === 'Product Information'){
$('.pricefields td').hide();
}


Any advice appreciated.

Answer

$tab.text() is the thing that's showing up in the tabName span, so that's the "name" of the tab.

You could write code like this (inside the "activate" handler):

if ($tab.text() === 'Tab1') {
    $('.pricefields td').hide();
}