Produits Entr'ouvert » Calebasse

J'aurai plutôt utilisé jQuery.toggleClass() et beaucoup de CSS pour en faire un truc plus générique utilisable partout, par exemple:

Pour la structure HTML:

  <div class="js-expandable">
    <label class="js-click-to-expand">Infos d'assuré</label>
    <div class="js-to-expand">
      ....
    </div>
  </div>

Pour la CSS:

.js-expandable .js-click-to-expand:after { content: " [-]" }
.js-expendable.js-expanded .js-click-to-expand:after { content: " [+]" }

.js-expandable .js-to-expand { display: none; }
.js-expandable.js-expanded .js-to-expand { display: block; }

Et pour le JS:

$(document).on('click', '.js-click-to-expand', function (event) {
   $(event.target).parents('.js-expandable').toggleClass('js-expanded');
});

Je n'ai pas testé mais l'esprit est là.

On doit aussi pouvoir faire ça sans JS du tout avec des URLs fragment:

  <div id="coin" class="expandable">
    <label class="to-hide">
      <a href="#coin">label [-]</a>
    </label>
    <label class="to-show">
      <a href="#">label [+]</a>
    </label>
    <div class="to-show">
    </div>
  </div>

CSS:

.expandable .to-show { display: none }
.expandable:target .to-show { display: block }
.expandable:target .to-hide { display: none }

Et Fred doit pouvoir pondre une animation CSS pour avoir un bel effet accordéon.

Ok.