Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>slideDown / slideUp / slideToggle</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#panel{width:220px;border:1px solid #ccc} #content{display:none;padding:8px;background:#f5f5f5}</style> </head> <body> <button id="toggle">Slide toggle</button> <div id="panel"> <div id="content">This is inside the sliding panel.</div> </div> <script> $("#toggle").on("click", function(){ $("#content").slideToggle(300); }); </script> </body> </html>
Output