JSFiddle - React, Tailwind, and code Playground

by remybach

HTML

<ul class="accordion">
    <li class="accordion-item">
        <h3>Some Heading</h3>
        <div class="details">
            Some information here.
        </div>
    </li>
    <li class="accordion-item">
        <h3>Some Other Heading</h3>
        <div class="details">
          Some more information here.
        </div>
    </li>
</ul>

CSS

.accordion-item {
    margin-bottom:10px;
    margin-left:20px;
}
h3 { position:relative; }
h3:before {
    color:#000;
    content:'>';
    display:block;
    left:-12px;
    position:absolute;
    top:0px;
    
    /* Set up our transitions - this only works in FF for some reason */
    -webkit-transition: all 0.2s linear;  /* Saf3.2+, Chrome */
       -moz-transition: all 0.2s linear;  /* FF4+ */
        -ms-transition: all 0.2s linear;  /* IE10 */
         -o-transition: all 0.2s linear;  /* Opera 10.5+ */
            transition: all 0.2s linear;
}
/* Rotate the arrow 90 degrees */
.open h3:before {
    -webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(90deg);  /* FF3.5+ */
        -ms-transform: rotate(90deg);  /* IE9 */
         -o-transform: rotate(90deg);  /* Opera 10.5 */
            transform: rotate(90deg);
}

JavaScript

jQuery(function($) {
    // Only do our hiding/showing of items so that people without JS can see all the info.
    $('.accordion-item:not(:first) .details').hide();
    $('.accordion-item:first').addClass('open');
    
    // Wrap the contents of the h3's in anchors (makes sense semantically)
    $('.details').prev('h3').each(function() {
        $(this).replaceWith('<h3><a href="#" class="trigger">'+$(this).html()+'</a></h3>');
    });
    
    $('.trigger').click(function(e) {
        e.preventDefault();

        var to_show = $(this).parent('h3').siblings('.details');
        $('.details').slideUp().parent('li').removeClass('open');

        // Don't slide back down if this is already the visible one.
        if ($('.details:visible')[0] !== to_show[0]) {
          to_show.slideDown().parent('li').addClass('open');
        }
    });
});