Creating an Accordion Menu with jQuery UI

The accordion menu is one of the nicer UI elements that jQuery UI provides. It consists of multiple rows, each of which has a title, and any of them can be expanded to reveal the inner content of that item - but generally, only one row can be expanded at a time. The simplest accordion menu is one with few custom options set - and that's the vanilla version we'll be testing out to start. Here's the breakdown: each accordion menu has a title (which is an h3 element), and a "contents" section, which is a div immediately following the h3 header. Finally, the whole package is wrapped in a div, and JavaScript code calls the accordion constructor function on that div 
There are many custom options available for the accordion menu, and in this section I'll apply a few of the nicer ones to create a customized menu. The first customization is the "collapsible" option, which I'll set to true - this allows any and all menu items in the accordion to be closed, including the active panel - which results in all panels being closed. The second customization is the "active" option, set to false, so that when the accordion menu loads, all panels will be shut. The final option is "heightStyle" set to "content" - this dictates that each accordion panel will only be as tall as its content requires.

HTML Code

                    
<div id="customAccordion">
    <!-- First accordion menu item-->
    <h3>Custom Feature #1</h3>
    <div>
        <p>
           Allow collapsible menus - including the active one.
        </p>
    </div>

 <!-- Second accordion menu item-->
    <h3>Custom Feature #2</h3>
    <div>
     <p>
            Sets active panel to false, making the menu start out with all menu items closed.
        </p>
    </div>

    <!-- Third accordion menu item-->
    <h3>Custom Feature #3</h3>
    <div>
     <p>
            Make each inside panel only as tall as it's content requires.
        </p>
    </div>
</div>
                                
                            

JavaScript Code

                    
$('div#customAccordion').accordion({
 collapsible: true,
    active: false,
    heightStyle: 'content'
});
                                 

Untuk cuba Demo Sila Klik Pautan Ini Accordion Menu with jQuery UI 

Disediakan Oleh
Banu Ochatewan