jQueryUI Accordion

jQueryUI Accordion Example

HTML

<div id="accordion">
    
    <h3><a href="#">Section 1</a></h3>
    
    <div>
        <input type="button" value="Lorem" />
        <input type="button" value="Ipsum" />
    </div>
    <h3><a href="#">Section 2</a></h3>
    
    <div>
        <p>Section 2 Content
            <br />Use this when you have multiple sections and want only one visible at a time.
            <br />
            <br />In this example you can close all the sections because the collapsible option is set to true
            <br />
            <br />$("#accordion").accordion({ collapsible: true });
            <br />
            <br />Try it. Click the bar above that says "Section 2"</p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    
    <div>
        <p>Section 3 Content
            <br />Use caution - and notice that if you have really long content it may be difficult to see the accordion section links. And the longest section sets the height for all of the sections.
            <br /><a href="http://huwshimi.com/comic/"><img src="http://dotnet.tech.ubc.ca/CourseWiki/images/a/a5/You_must_be_this_tall.png" style="border:none;width:300px"/></a>
            
        </p>
    </div>
    <h3><a href="#">Section 4</a></h3>
    
    <div>
        <p>Section 4 Content
            <br />Thanks for reading all four sections.</p>
    </div>
</div>

CSS

input[type="button"]{
    display: block;
    width: 100%;
}

JavaScript

$("div#accordion").accordion({ heightStyle: "content", collapsible: true});

$("input[type=button]").button();

$("input[type=button]").click(function(){
    $(this).append($("<i class='fa fa-eye'></i>"));
});