Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery UI - Accordion heightStyle option</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <style> body{font-family:Arial, sans-serif; padding:20px;} #accordion{max-width:500px;} </style> </head> <body> <h3>heightStyle: "content"</h3> <p>Each panel sizes itself to its own content instead of matching the tallest panel.</p> <div id="accordion"> <h3>Short section</h3> <div><p>Just one short line.</p></div> <h3>Long section</h3> <div><p>This section has a lot more text in it so it naturally takes up more vertical space than the short section above, and with heightStyle set to "content" the panel simply matches its own content instead of stretching to match anything else.</p></div> </div> <script> $(document).ready(function(){ $("#accordion").accordion({ heightStyle: "content" }); }); </script> </body> </html>
Output