Long text in accordion header
+-

With little small css tweak we can have very long titles in accordion headers. The padding and line-height can be adjust accordion to our design.

<style>
.z-accordion.vertical > .z-section > h3 {
	height: auto !important;
	line-height: 22px !important;
	padding: 14px 20px 14px 10px !important;
}
</style>

How To Use Font Awesome Icons In Zozo Accordion
+-

We can use any other icons including  Font Awesome icons.  First we need the hide the zozo accordion icons by setting  showIcons:false in the options. After that we can add our icons and style it the way we want it.

The HTML

Below the HTML structure for Zozo Accordion.

<div id="demo-accordion">
    <section>
        <h3>Getting Started<i class="z-state-close icon-chevron-down">&nbsp;</i><i class="z-state-open icon-chevron-left">&nbsp;</i></h3>
        <div>The following default options are provided by the plugin.</div>
    </section>
    <section>
        <h3>Configuration<i class="z-state-close icon-chevron-down">&nbsp;</i><i class="z-state-open icon-chevron-left">&nbsp;</i></h3>
        <div>Check it out at zozoui.com</div>
    </section>
    <section>
        <h3>Methods<i class="z-state-close icon-chevron-down">&nbsp;</i><i class="z-state-open icon-chevron-left">&nbsp;</i></h3>
        <div>Check it out at zozoui.com</div>
    </section>
    <section>
        <h3>Events<i class="z-state-close icon-chevron-down">&nbsp;</i><i class="z-state-open icon-chevron-left">&nbsp;</i></h3>
        <div>Check it out at zozoui.com</div>
    </section>
</div>

The Custom CSS

Add the following the custom css to position our icons to the left and style the states.

<style>
    .z-accordion.vertical > section > h3 .z-state-close,
    .z-accordion.vertical > section > h3 .z-state-open
    {
        position: absolute;
        right: 1em;
        background-position: 0 0;
        height: 12px;
        width: 12px;
        top: 1.25em;
        top: 50%;
        margin-top: -.45em;
    }

    .z-accordion.vertical > section.z-active > h3 .z-state-close
    {
        display: block;
    }

    .z-accordion.vertical > section.z-active > h3 .z-state-open,
    .z-accordion.vertical > section > h3 .z-state-close
    {
        display: none;
    }
</style>

The jQuery Code

The jQuery activation code will be the same like normal accordion with one change which is the  showIcons: false.

<script>
    jQuery(document).ready(function () {
        jQuery("#demo-accordion").zozoAccordion({
            theme: "silver",
            active: 1,
            sectionSpacing: 4,
            headerSize: 48,
            showIcons: false
        });
    });
</script>