jQuery hide and show button using if else

Question

I have a series of tabs in my page, I want to hide the button first off, then when you click on a certain tab within the page - then show the button. This bit I have working!

My problem is - When I click on another tab, I want the to set the button to hide() again. Im new to jQuery and Im thinking I need to add an if else statement to do this?

Code below:

$(document).ready(function () { 
    $('.myButton').hide();

    $('a.tab1').click(function() {
        $('.myButton').show();
        return false;
    });
    $('.myButton').hide(); // hide again once clicked off the tab.
});

Answer 1

so am assuming you want following with your button.

1. Should not appear, when page loads
2. Should appear only when a certain tab, say tab1 is clicked.
3. Should disappear when anyother tab (other than tab1) is clicked.

then make it simple, change your code to be simple. do this:

<script>
$(document).ready(function(){
  $('.button').hide(0);  //or do it through css
  $('a.tab1').click(function(){
     $('.button').show();

  });

 //otherTab is the class for the tabs other than tab1
 $('a.otherTab').click(function(){
    $('.button').hide();
 });

});
</script>

this is a super simple script to achieve what you want. It can be more generic and short. But then you should get the idea right? you should be able to select click events of your respective tabs, that's all you need to sort out.

Assign Id or Class or whatever to distinctly grab your tabs.