Using Click Event Show and Hide your Content
click event Description:-
The click
event is fired when a pointing device button (usually a mouse button) is pressed and released on a single element. In simple words Click event is fired when you click on a button.
Implement the code below to get the functionality of Click to work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<html> <head> <title>ONCLICK EVENT</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans" rel="stylesheet"> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color:#c5c5c5; font-family: 'Merriweather', serif; font-family: 'Open Sans', sans-serif; } .wrapper { padding:20px 200px; } .mainbody{ background-color: #e6e6e6; border-radius: 5px; padding-bottom: 50px; } .container { width:300px; margin:50px auto; } .btn { border: none; color: #fff; background-color: #55C34D; margin: 50px auto; height: 50px; width: 100%; } .content { color: #000; height: auto; width:80%; margin: 50px auto; display: none; } .content h1 { margin-bottom: 10px; } .content p { text-align: justify; padding: 0px 5px; } </style> </head> <body> <div class="wrapper"> <div class="mainbody"> <div class="container"> <button class="btn">Show Content</button> </div> <div class="content"> <h1 align="center">This is the content area.</h1> <p>Laser pointer attacks against aircraft pilots are on the rise. They are becoming a growing threat to passenger planes, especially during take-offs and landings. In the United States alone over 3000 laser pointer incidents are reported every year.</p> <p>More and more commercial airline pilots have reported laser pointer attacks in which flashes of light temporarily blind their vision. A recent study has found that laser pointers can cause permanent eye damage to pilots as well as .</p> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".btn").click(function(){ if($(this).html() == "Show Content") { $(".content").fadeIn(500); $(this).html("Hide Content"); } else { $(".content").fadeOut(500); $(this).html("Show Content"); } }); }) </script> </body> </html> |
For more information look into the documentation of Click event here -> https://api.jquery.com/click/
Output Screenshot
You can also download the above code directly from this link ->
https://drive.google.com/file/d/0BxI5IDiJNiLPX2V1dFRwVUppbXM/view?usp=sharing
In case of any questions feel free to drop us a comment.
Recent Posts
Recent Comments
- LogixTree Networks on Localhost showing “Index/of” instead of displaying the Website
- AMANUR RAHMAN on Localhost showing “Index/of” instead of displaying the Website
- Christy on Support Purchase Notes in Order Emails WooCommerce
- LogixTree Networks on Localhost showing “Index/of” instead of displaying the Website
- Sofia on Localhost showing “Index/of” instead of displaying the Website