CODEWITHSUNDEEP
jqueryhtmlcsshideshow-hide
John
John

Reputation: 1797

jQuery hide and show button using if else

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.
});

Upvotes: 0

Views: 41283

Answers (7)

Rejneesh Raghunath
Rejneesh Raghunath

Reputation: 1724

$(document).ready(function(){
    $("button").click(function(){
        // show hide paragraph on button click
        $("p").toggle("slow", function(){
            // check paragraph once toggle effect is completed
            if($("p").is(":visible")){
                alert("The paragraph  is visible.");
            } else{
                alert("The paragraph  is hidden.");
            }
        });
    });
});

Upvotes: 0

r043v
r043v

Reputation: 1869

keep jquery dom search and don't miss to not keep html link follow

var mybutton = $("#mybutton");

$('a.tab_who_show').click(function(event)
{
        mybutton.show();
        event.preventDefault();
});

$('a.tab_who_hide').click(function(event)
{
        mybutton.hide();
        event.preventDefault();
});

you can also use jquery.on to work on a container

var mybutton = $("#mybutton");
$('#tabs_container').on("click","a.tab_who_hide",function(e){
        mybutton.hide();
        e.preventDefault();
}).on("click","a.tab_who_show",function(e){
        mybutton.show();
        e.preventDefault();
});

and test class presence to write a more global code

var mybutton = $("#mybutton");
$('#tabs_container').on("click","a",function(e){
        var needToShow = $(this).hasClass('tab_who_show');
        mybutton.toggle(needToShow);
        e.preventDefault();
});

Upvotes: 0

Max
Max

Reputation: 7090

See .toggle() of jQuery. Has the same of the if statement but managed by jQuery library.

http://api.jquery.com/toggle/

Upvotes: 0

anmarti
anmarti

Reputation: 5143

This code only works when you clic the tab thas has the class tab1. Check that all tabs within your page has this class, if not so, assing this class to all tabs in your page.

Moreover the function toggle() acts as if else in this case. So if the button is visible toggle will make it hidden, else will make it visible:

<a class="tab1">tab1</a>
<a class="tab1">tab2</a>

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

$('.tab1').click(function() {
  $('.myButton').toggle();
});
});

TRY IT

Upvotes: 4

waycell
waycell

Reputation: 31

add click event to the parent of all "tab" links element.

$('.parentofTabLinks').click(function(event) {
    if($(event.target).is('a.tab1'))
        $('.myButton').show();
    else
       $('.myButton').hide();
});

Upvotes: 0

Manish Mishra
Manish Mishra

Reputation: 12375

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.

Upvotes: 3

Filippo oretti
Filippo oretti

Reputation: 49817

$(function(){
    $('div').hide(0);
    $('button').on('click',function(){
    $('div').toggle(200);
    });
});

then if you can/would use a fade effect for hiding and showing your element on click you can choose somenthing like ( pretty animation):

$(function(){
        $('div').hide(0);
        $('button').on('click',function(){
        $('div').fadeToggle(200);
        });
    });

Upvotes: 0

Related Questions