Pistachio the front end framework and pattern library for graze.com

contents:


    accordion

    The accordion functionality requires pistachio.js. In addition to the basic show/hide functionality, the accordion JavaScript also applies the following:

    • An animating icon
    • Numerous HTML5 and aria attributes to improve accessiblity
    • Keyboard controls - when focused an accordion element will activate on enter key press

    If JavaScript is unavailable for some reason, an accordion will default to being expanded and will appear as regular page content.

    accordion options

    default state

    To default accordion sections to the open state, add the data attribute data-accordion-open to the relevant accordion__section.

    basic accordion

    The classic model for presenting a faq. Accordions can be used to make browsing content heavy pages a bit easier or to separate out different options on a page.

    • Do you deliver to Anatarctica?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • How do I cancel?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • How do I use a promotion or voucher code?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    <ul class="list-unstyled accordion accordion--list" data-p-module="accordion">
        <li class="accordion__section" data-accordion-open="true">
            <p class="accordion__section__title">
                Do you deliver to Anatarctica?
            </p>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
        <li class="accordion__section">
            <p class="accordion__section__title">
                How do I cancel?
            </p>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
        <li class="accordion__section">
            <p class="accordion__section__title">
                How do I use a promotion or voucher code?
            </p>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
    </ul>

    nested accordion

    Accordions can be nested inside each other but should never have more than one level of nesting or it can become quite unwieldy and complex to use.

    • Do you deliver to Anatarctica?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      • What?

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      • Why?

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      • How?

        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • How do I cancel?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • How do I use a promotion or voucher code?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    <ul class="list-unstyled accordion accordion--list" data-p-module="accordion">
        <li class="accordion__section">
            <p class="accordion__section__title">
                Do you deliver to Anatarctica?
            </p>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <ul class="list-unstyled accordion accordion--list" data-p-module="accordion">
                    <li class="accordion__section">
                        <p class="accordion__section__title">
                            What?
                        </p>
                        <div class="accordion__section__content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </li>
                    <li class="accordion__section">
                        <p class="accordion__section__title">
                            Why?
                        </p>
                        <div class="accordion__section__content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </li>
                    <li class="accordion__section">
                        <p class="accordion__section__title">
                            How?
                        </p>
                        <div class="accordion__section__content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="accordion__section">
            <p class="accordion__section__title">
                How do I cancel?
            </p>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
        <li class="accordion__section">
            <p class="accordion__section__title">
                How do I use a promotion or voucher code?
            </p>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
    </ul>

    responsive accordion

    Applying a data-accordion-responsive attribute to the accordion element enables content to operate as an accordion only at certain breakpoints. The breakpoint definitions match up with those used in the grid.

    In this example the content only operates as an accordion at the xxs, xs, and sm breakpoints which you can observe by resizing your browser.

    • Do you deliver to Anatarctica?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • How do I cancel?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • How do I use a promotion or voucher code?

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    <ul class="list-unstyled accordion accordion--list" data-p-module="accordion" data-accordion-responsive="xxs,xs,sm">
        <li class="accordion__section" data-accordion-open="true">
            <h4 class="accordion__section__title">
                Do you deliver to Anatarctica?
            </h4>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
        <li class="accordion__section">
            <h4 class="accordion__section__title">
                How do I cancel?
            </h4>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
        <li class="accordion__section">
            <h4 class="accordion__section__title">
                How do I use a promotion or voucher code?
            </h4>
            <div class="accordion__section__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
    </ul>