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.