Home/ Questions/Q 8879163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:53:28+00:00

When click headers to expand/collapse content that is broken into logical sections, But those

  • 0

  • When click headers to expand/collapse content that is broken into
    logical sections,
    But those section’s have some default height defined .Suppose i have to give a fixed
    height i.e 200px .How can we customize the height that is expanded after the click
    of header i.e Section 1 and Section 2

    <html>
   <head>
       <meta charset="utf-8" />
       <title>jQuery UI Accordion - Default functionality</title>
       <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-
       ui.css"           
       />
       <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
       <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
       <link rel="stylesheet" href="/resources/demos/style.css" />

     </head>


      <div id="accordion">
       <h3>Section 1</h3>
       <div>
           <p>
           Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
           ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
           amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
           odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
           </p>
       </div>
       <h3>Section 2</h3>
       <div>
           <p>
           Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
           purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
           velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
           suscipit faucibus urna.
           </p>
       </div>

      </div>​
   </html>
     javascript:-
     $(function() {
           $( "#accordion" ).accordion();
       });​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If content height is your concern you might take a look at “heightStyle” property,
    Or if you want to use custom height logic, can use the “beforeActivate” event. The event fires before activating a tab. so in this event height changing can be possible.

    $(function() {
    $("#accordion").accordion({
        collapsible: true,
        active: false,
        beforeActivate: function(event, ui){
            $(ui.newPanel).css('height', '20');
        }
    });   
});

    hope this helps.

    • 0