JSFiddle - React, Tailwind, and code Playground

by gkohen

HTML

<dl class="accordion">
                <dt>A</dt>
                <dd><p>• 1
                    <br>• 2
                    <br>• 3
                    <br>• 4
                    <br>• 5
                    <br>• 6</p></dd> 
            </dl>

CSS

.accordion { background-color: black; border-radius: 10px; padding: 10px;      }
                
                .accordion dt { padding: 0.5em; background-color:#456db5; cursor:pointer; border-bottom: 1px solid #355faa; font-size: 13px; }
                
                .accordion dt:hover { color: #ffffff; }
                
                .accordion .on { background-color:#456db5; cursor:default; }
                
                .accordion dt,
                .accordion .on:hover { color:white; }
                
                .accordion dd { padding-left: 1em; margin: 0 auto; padding-right: 0.5em; background-color: white; font-size: 14px;  }

                /* NOTE:
                 Do not apply top/bottom padding or margin to the accordion content,
                 as its affects to the box model will cause the animation to be choppy.
                 Instead, apply vertical spacing to the content elements.
                 */
            
            .accordion dd p { padding-top:.5em; padding-bottom:.5em;}

JavaScript

if (typeof jQuery != "undefined") {
                    (function($) {
                     $('.accordion dt').each(function() {
                                             $(this).on('click', function(){
                                                        $(this).toggleClass('on').siblings('.on').removeClass('on').end()
                                                        .next('dd').slideToggle().siblings('dd').slideUp();
                                                        }).next('dd').hide();
                                             });
                     })(jQuery);
                }