alternating button on clicking event?

Question

Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:

<div id="first"></div>
<div id="second"></div>

And button is:

<input type="button" value="show first" onClick="called a javascript();"/>

Only single div is shown i.e. first

<script>
    $(document).ready( function() {
        $("#second").hide();
    });
</script>

Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.

Thanks in advance

Answer 1

Heres' the FIDDLE. Hope it helps.

html

<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />

script

$('#btn').on('click', function () {
    var $this = $(this);
    if ($this.val() === 'show first') {
        $('#first').show();
        $('#second').hide();
        $this.val('show second');
    } else {
        $('#first').hide();
        $('#second').show();
        $this.val('show first');
    }
});

Answer 2

What you are looking for is the toggle function from jquery

Here's an example on fiddle

$(".toggleMe").click(function() {
   $(".toggleMe").toggle(); 
});