Hi
How to expand collapse HTML DIV on click using jQuery.
<div> <a href="javascript:void()">Expand</a> </div> <div> details here </div>
When i click on Expand the 2nd div will be expanded.
Hi makenzi.exc,
Refer below example.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } </style> </head> <body> <div align="center" style="display: grid; align-items: center; height: 50px; background: #808080;"> <a href="javascript:void(0)" id="lnkExpandCollapse" style="text-decoration: none; color: black">Expand</a> </div> <div id="dvDetails" align="center" style="display: grid; align-items: center; color: white; height: 50px; background: #61028D;"> Welcome to ASPSnippets </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("#dvDetails").hide(); $("#lnkExpandCollapse").click(function () { $("#dvDetails").slideToggle("slow"); if ($(this).text() == "Expand") { $(this).text("Collapse"); } else { $(this).text("Expand"); } }); }); </script> </body> </html>
Demo
Screenshot
Downloads
Download Sample
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.