JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">
               
                <h4 class="accordion-toggle"> <img src="images/link.gif" /> first element</h4>
                    <div class="accordion-content default">
                        <ul>
                            <li><a href="index.html"> Security1</a></li>
                            <li><a href="index.html"> Security2</a></li>
                        </ul>
                    </div>

              <h4 class="accordion-toggle"> <img src="images/link.gif" /> second element</h4>
                    <div class="accordion-content">
                    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
                    </div>

CSS

#accordion{width:20%; float:left; height:100%; overflow:hidden;  }
          .accordion-toggle {cursor: pointer; background:#E4E4E4; font-size:larger; font-size:1em; padding-left:0.3em; color:#0f5595;  }
          .accordion-toggle img{ padding-right:0.4em; padding-top:0.3em;}
          .accordion-content {display: none; float:none;  }
          .accordion-content.default {display: list-item; }
          .accordion-content.contact{ display: list-item;}

JavaScript

$(document).ready(function ($) {
            $('#accordion').find('.accordion-toggle').click(function () {
                $("#accordion .accordion-toggle").css('background-color', '#E4E4E4');
                //Expand or collapse this panel
                $(this).next().slideToggle('fast');
                $(this).css( "background-color", "#191970" );

                //Hide the other panels
                $(".accordion-content").not($(this).next()).slideUp('fast');

                           
               
            });
        });