<html>
    <head>
        <title>Accordion</title>
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.8.0/dist/alpine.js" defer></script>
    </head>
    <body class="bg-grey-300 h-full">
        <ul class="block w-11/12 my-4 mx-auto" x-data="{selected:null}">
            <li class="flex align-center flex-col">
                <h4 @click="selected !== 0 ? selected = 0 : selected = null"
                    class="cursor-pointer px-5 py-3 bg-indigo-300 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3 rounded-t">Accordion item 1</h4>
                <p x-show="selected == 0" class="border py-4 px-2">
                    This is made with Alpine JS and Tailwind CSS
                </p>
            </li>
            <li class="flex align-center flex-col">
                <h4 @click="selected !== 1 ? selected = 1 : selected = null"
                    class="cursor-pointer px-5 py-3 bg-indigo-400 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3">Accordion item 2</h4>
                <p x-show="selected == 1" class="border py-4 px-2">
                     There's no external CSS or JS
                </p>
            </li>
            <li class="flex align-center flex-col">
                <h4 @click="selected !== 2 ? selected = 2 : selected = null"
                    :class="{'cursor-pointer px-5 py-3 bg-indigo-500 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3': true, 'rounded-b': selected != 2}">Accordion item 3</h4>
                <p x-show="selected == 2" :class="{'border py-4 px-2': true, 'rounded-b': selected == 2}">
                    Pretty cool huh?
                </p>
            </li>
        </ul>
    </body>
</html>
/*  no CSS */
// no JS

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.