Click Function – Hide And Show Answer – Using J Query
Description: Click Function – Hide And Show Answer – Using J Query
WHAT YOU’LL LEARN / COURSE OBJECTIVE
- Understand the JavaScript language & the Document Object Model.
- Detect and respond to user actions.
- Alter, show, hide and move objects on a web page.
- Check information inputted into a form.
- jQuery is an easy to learn JavaScript library which makes JavaScript programming very easy.
- jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.
- jQuery also simplifies complicated tasks like AJAX calls and DOM manipulation.
- jQuery will run exactly the same and produce the same output in all major browsers.
- jQuery is free and very easy to include in your projects: just download its latest version from the jQuery website, or use an online Content Delivery Network.
- jQuery is continuously upgraded, maintained and documented by a dedicated community of great developers. This ensures high quality and support on the internet.
I have questions and answers, the answers showing when a question has clicked the answer with hiding/show.
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
|
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#showanswer').click(function(){ $('.Question, p').show(); $('#showanswer').hide(); $('#hideanswer').show(); }); $('#hideanswer').click(function(){ $('.Question, p',).hide(); $('#showanswer').show(); $('#hideanswer').hide(); }); }); </script> <style> .Question p{ background: #F39814; color: white; margin: 3px; padding: 0.4em; } </style> </head> <body> <strong>Hide And Show Answer Based On Question Click - Using Jquery</strong> <br/> <br/> <input type="button" value="Show Answer" id="showanswer" /> <input type="button" value="Hide Answer" id="hideanswer"style="display:none;position:fixed"/> <br> <br> <div id="dialog" title="Basic dialog" class="Question" > <p style="display:none" class="answer" >jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.</p> </div> </body> </html> |

Please follow and like us:
0