CODEWITHSUNDEEP
jqueryhtmlcss
Ngorld
Ngorld

Reputation: 856

How to hide one DIV and show one DIV in jQuery

I have code below :

<div class="P1">
Testing OK
<input type="button" value="OK1" id="bp1">
</div>

<div class="P2">
Testing OK
<input type="button" value="OK2" id="bp2">
</div>

And jQuery code below :

$("#bp1").click(function(){
        $(".P1").hide();
        $(".P2").show();
    });

But when it's not working.

Why ? And how to fix ?

Thanks you so much.

UPDATE It's working when I remove $(".P1").hide(); OR $(".P2").show(); from my code

Upvotes: 0

Views: 66

Answers (4)

Guillermo Nahuel Varelli
Guillermo Nahuel Varelli

Reputation: 318

You can try the following: 

$("#bp1").click(function(){
    $(".P1").removeClassName('hidden');
    $(".P2").addClassName('hidden');
});

The property hidden should be added to the css.

hidden {
visibility: hidden;
}

Upvotes: 0

Zach Leighton
Zach Leighton

Reputation: 1941

You need to have click handlers for each of the buttons

$("#bp1").click(function(){
        $(".P1").hide();
        $(".P2").show();
    });

$("#bp2").click(function(){
        $(".P2").hide();
        $(".P1").show();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="P1">
Testing OK P1
<input type="button" value="OK1" id="bp1">
</div>

<div class="P2">
Testing OK P2
<input type="button" value="OK2" id="bp2">
</div>

Upvotes: 0

Jim Moody
Jim Moody

Reputation: 808

That code should work, try including this in your html page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Once you include that, your code will work.

Upvotes: 0

TechGirl
TechGirl

Reputation: 488

$("#bp1").click(function(){
        $(".P1").css("display","none");
        $(".P2").css("display","block");
    });

You can hide and show in this way

Upvotes: 1

Related Questions