JSFiddle - React, Tailwind, and code Playground

by speaktorob

HTML

<h1>Jumpy accordion</h1>

<div class="accordion">
    
    <h2>Awesome biscuits</h2>
    <ul>
        <li>Viennese sandwich</li>
        <li>Oreo cookie</li>
        <li>Maryland cookie</li>
    </ul>
    
    <h2>Average biscuits</h2>
    <ul>
        <li>Bourbon</li>
        <li>Chocolate digestive</li>
        <li>Jammy dodger</li>
    </ul>
    
    <h2>Not biscuits</h2>
    <ul>
        <li>Jaffa cake</li>
    </ul>
    
</div>

<hr />

<h1>Not a jumpy accordion (no margins)</h1>

<div class="accordion nojump">
    
    <h2>This accordion</h2>
    <ul>
        <li>Viennese sandwich</li>
        <li>Oreo cookie</li>
        <li>Maryland cookie</li>
    </ul>
    
    <h2>Will not</h2>
    <ul>
        <li>Bourbon</li>
        <li>Chocolate digestive</li>
        <li>Jammy dodger</li>
    </ul>
    
    <h2>Jump</h2>
    <ul>
        <li>Jaffa cake</li>
    </ul>
    
</div>

CSS

ul {
    padding-left: 1em;
}
ul li {
    margin: 12px 0;
}
h2 {
    font-weight:bold;
    margin : 12px 0;
    cursor : pointer;
}
.nojump h2 {
    margin: 0;
}
.nojump ul li {
    margin: 0;
}


body {
    padding: 20px;
    font-family: Verdana, Arial, sans-serif;
}
h1 {
    font-size: 125%;
    font-weight: bold;
}

JavaScript

$(".accordion").accordion();