jquery click to hide and show another button

Question

I have two buttons set as hidden :

<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />

I have a jquery where I check some conditions fetched from the database. Either one of the button will be shown and that depends on if the condition is 1 or 0..That means when I click any of the button it must get hidden and the other one must shown up..? But it's not happening..The button I click gets hidden and the other button isn't shown up..If anyone can help.. My jquery :

$(document).ready(function() {
        var condition = "<?php echo $condition; ?>"; //i get this from database
        var c = condition;


        if(c == 0){

                $('#a').css({'display':''});
            $('#a').click(function(){
            $('#a').hide();
            $('#b').show();

                  });   
        }else if(c == 1){

                $('#b').css({'display':''});
            $('#b').click(function(){
            $('#b').hide();
            $('#a').show();
        }
        });

try to log or alert the condition variable in JS.. Whats its value ? — Vedant Terkar, Jul 29 '13 at 16:33
you might want to check out jquery [.toggle](http://api.jquery.com/toggle/) function — Sharlike, Jul 29 '13 at 16:34
@VedantTerkar it's value is not getting updated on button click on alert but getting updated on database.. — user2605321, Jul 29 '13 at 16:36

Sean · Accepted Answer · 2013-07-29T16:45:05.803

You need to move your .click(function(){}) outside of your if/else block, as condition/c never change, so the only the first .click(function(){}) works. The other one will never be called. This way, your hide/show is independent of the condition/c value.

$(document).ready(function() {
    var condition = <?php echo $condition; ?>; //i get this from database
    var c = condition;


    if(c == 0){

            $('#a').css({'display':''});   
    }else if(c == 1){

            $('#b').css({'display':''});
    }

        $('#a').click(function(){
              $('#a').hide();
              $('#b').show();
        });
        $('#b').click(function(){
              $('#b').hide();
              $('#a').show();
        });
    });

see this jsFiddle example - http://jsfiddle.net/bWJ5A/1/

score 1 · Answer 2 · answered Jul 29 '13 at 16:35

1

var condition = "<?php echo $condition; ?>";

This should be modified to

var condition = <?php echo $condition; ?>;

You got a string, but you compared with a numeric.

answered Jul 29 '13 at 16:35

Telvin Nguyen

3,569
4
25
39

1

It looks like `1 == '1'` is the same as `1 == 1` (http://stackoverflow.com/a/359547/689579), so either one is functional when using integers. – Sean Jul 29 '13 at 17:02

score 0 · Answer 3 · answered Jul 29 '13 at 16:50

code like this, at butB click; you haven't close with "});"

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
var condition = 0; //i get this from database
    var c = condition;
    if(c == 0){
        $('#a').css({'display':''});
        $('#a').click(function(){
            $('#a').hide();
            $('#b').show();
        });   
    }else if(c == 1){
        $('#b').css({'display':''});
        $('#b').click(function(){
            $('#b').hide();
            $('#a').show();
        });
    }
    });
</script>
<body>
<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />
</body>
</html>

jquery click to hide and show another button

3 Answers3