Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!DOCTYPE html> <title>My Example</title> <style> p { background: gold; padding: 20px; } </style> <!-- Load jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Use jQuery --> <script> // Wait for DOM to load and be ready $(document).ready(function(){ // Click event handler for the 'hide' button $( "#hideContent" ).click(function() { // Fade out the element $( "p" ).fadeOut(); }); // Click event handler for the 'show' button $( "#showContent" ).click(function() { // Fade in the element $( "p" ).fadeIn(); }); }); </script> <button id="hideContent">Hide</button> <button id="showContent">Show</button> <p>Look at me!</p>
Preview