Template Support in JQuery Accordion widget

18 Apr 20172 minutes to read

In JavaScript, you can load the contents or HTML elements directly inside the <div> element that you are going to convert as Accordion control.

html

<div id="pizzaMenu" style="width: 500px">
    <h3>
        <a href="#">GARDEN FRESH (Veg)</a>
    </h3>
    <div>
        <img src="~/Content/accordion/garden-veggie.png" alt="garden-fresh" />
        <div class="ingredients">
            Rate    : $50
            <br />
            Ingredients : cheese, onions, green capsicums & tomatoes.
        </div>
    </div>
    <h3>
        <a href="#">CORN & SPINACH (Veg)</a>
    </h3>
    <div>
        <img src="~/Content/accordion/corn-and-spinach-05.png" alt="garden-fresh" />
        <div class="ingredients">
            Rate    : $70
            <br />
            Ingredients : cheese, sweet corn & green capsicums.
        </div>
    </div>
    <h3>
        <a href="#">CHICKEN DELITE (Non-veg)</a>
    </h3>
    <div>
        <img src="~/Content/accordion/chicken-delite.png" alt="garden-fresh" />
        <div class="ingredients">
            Rate    : $100
            <br />
            Ingredients : cheese, chicken chunks, onions & pineapple chunks.
        </div>
    </div>
</div>

javascript

$("#pizzaMenu").ejAccordion({ enableMultipleOpen: true });