Toggle between divs
Question
I need to hide these divs on click of the button in another div as shown below. When I click on a button in another div , it hides the other div and the opposite.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
tesing hide
</title>
<style>
#ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; }
</style>
</head>
<center>
<div id="ticket">
<div> this is the content of my ticket div
</div>
<button>Show usernamepassword</button>
</div>
<div id="usernamepassword">
<div> this is the content of username and password div</div>
<button>Show ticket</button>
</div>
</center>
</html>
3 answers
solution1
2 2017-09-07 14:01:10
$( ".target" ).hide();
This will hide an element and similarly
$( ".target" ).show();
will show it.
Using these two in a couple of functions and then calling them from click events on the buttons, should give you what you're looking for.
I am not providing the full code solution as this is trivial and you should be able to follow the docs yourself.
Here is a link to the documentation so you can read about it:
solution2
1 2017-09-07 14:05:07
Like this?
$('#usernamepassword').hide(); $('#ticket button').on('click', function(){ $('#usernamepassword').toggle(); $('#ticket').toggle(); }); $('#usernamepassword button').on('click', function(){ $('#ticket').toggle(); $('#usernamepassword').toggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title> tesing hide </title> <style> #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; } </style> </head> <center> <div id="ticket"> <div> this is the content of my ticket div </div> <button>Show usernamepassword</button> </div> <div id="usernamepassword"> <div> this is the content of username and password div</div> <button>Show ticket</button> </div> </center> </html>
solution3
0 2017-09-07 14:01:32
Just add an id to both of the buttons and assign an event to them to toggle the divs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title> tesing hide </title> <style> #ticket, #usernamepassword { margin-top: 20px; width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px; text-align: center; } </style> </head> <center> <div id="ticket"> <div> this is the content of my ticket div </div> <button id="showUsr">Show usernamepassword</button> </div> <div id="usernamepassword"> <div> this is the content of username and password div</div> <button id="showTicket">Show ticket</button> </div> </center> </html> <script> $('#showUsr').on('click',function(){ $('#usernamepassword').toggle(); }); $('#showTicket').on('click',function(){ $('#ticket').toggle(); }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.