How to hide one DIV and show one DIV in jQuery

Question

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

Are you including the jQuery library? The code looks like it should work fine. — Weafs.py
– Weafs.py, Commented Jan 7, 2015 at 14:07
Yea you probably don't have jQuery included, the JSFiddle for this works fine: jsfiddle.net/frakukm0 — Jim Moody
– Jim Moody, Commented Jan 7, 2015 at 14:09
its working fine. jsfiddle.net/znyfpev4 . somthing is missing on your. it should be jquery library — erkan demir
– erkan demir, Commented Jan 7, 2015 at 14:09
It's working when I remove $(".P1").hide(); or $(".P2").show(); from my code. Why ? — Ngorld
– Ngorld, Commented Jan 7, 2015 at 14:09
I literally copied the code, posted in a snippet, included jquery and worked fine? — jbutler483
– jbutler483, Commented Jan 7, 2015 at 14:10

TechGirl · Accepted Answer · 2015-01-07 14:07:03Z

1

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

You can hide and show in this way

answered Jan 7, 2015 at 14:07

TechGirl

4782 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Weafs.py Over a year ago

There is no need to change the display property, OP's code should work as is.

Ngorld Over a year ago

Please, you can tell me why my code is not working ? Thanks you

Jim Moody · Accepted Answer · 2015-01-07 14:11:21Z

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.

Zach Leighton · Accepted Answer · 2015-01-07 14:17:48Z

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>

Topr · Accepted Answer · 2015-01-07 14:21:48Z

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

Collectives™ on Stack Overflow

How to hide one DIV and show one DIV in jQuery

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related