JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test1
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test2
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test3
  </div>
  </section>
</body>

CSS

.panel .contenu {
    display:none;    
}

.panel.expanded .contenu {
    display:block;
    background: #CCC;
    padding: 1em;
}

.panel .panel-toggle-btn:before {
    content:"Ouvrir";
}

.panel.expanded .panel-toggle-btn:before {
    content:"Fermer";
}

JavaScript

function expand($panelToOpen){
  $(".panel").not($panelToOpen).removeClass("expanded");
  $panelToOpen.toggleClass("expanded");  
}

function init() {
    var panelToExpand = 0; //déplie le premier panel par défaut
    var match = window.location.hash.match(/expanded=(\d+)/);
    if(match != null && match[1] != null){
        panelToExpand = parseInt(match[1]);      
    }  
    expand( $(".panel").eq(panelToExpand) );
    
    $(".panel").each(function(p){
        $(this).find('.panel-toggle-btn').on('click', function(e){
            e.preventDefault();
            expand( $(this).closest('.panel') );
            window.location.hash = "expanded="+p;
        });
    });
};

init();