Créer un accordéon vertical

Accordéon simple dans un document, un portlet,...

Voici le code html à insérer dans l'éditeur en mode html pour obtenir un accordéon vertical dans un document, un portlet,...


<div id="accordion">
<h2 style="text-align: left;">Premier titre</h2>
<div>
Premier texte
</div>
<h2 style="text-align: left;">Deuxième titre</h2>
<div>
Deuxième texte
</div>
<h2 style="text-align: left;">Troisième titre</h2>
<div>
Troisième texte
</div>
</div>


Il suffit d'ajouter

<h2 style="text-align: left;"> Titre</h2>
<div>
Texte
</div>

avant la balise </div> finale pour ajouter un élément.

Accordéon dans une page template tel que index_html

Pour l'exemple précédent, l'accordéon est édité au sein d'un même document.
Pour les utilisateurs avancés, il est possible de créer un accordéon dont chacun des éléments peut être édité dans un document différent. Cette manière de faire permet d'éviter les problèmes avec le code html de l'accordéon.

Avant d'insérer le code, il faut créer un dossier dont l' id sera accordion et y ajouter au moins trois documents.

Voici le code à insérer:

     <div id="accordion">
       <tal:loop repeat="elt python: context.portal_catalog(path='/nom-de-linstance/nom-de-linstance/accordion', portal_type=('Document', 'Topic'), review_state=['published_and_hidden'], sort_on='getObjPositionInParent')">
       <tal:isdocument condition="python: elt.portal_type == 'Document'">
       <h2 tal:content="elt/Title">Title</h2>
       <div>
        <p tal:condition="isManager"><a href="#" tal:attributes="href python: elt.getURL() + '/edit'">[modifier cette zone]</a></p>
        <tal:block tal:replace="structure python: elt.getObject().getText()">Text</tal:block>
       </div>
       </tal:isdocument>
       <tal:istopic condition="python: elt.portal_type == 'Topic'" repeat="doc python: elt.getObject().queryCatalog()">
       <h2 tal:content="doc/Title">Title</h2>
       <div>
        <p tal:condition="isManager"><a href="#" tal:attributes="href python: doc.getURL() + '/edit'">[modifier cette zone]</a></p>
        <tal:block tal:replace="structure python: doc.getObject().getText()">Text</tal:block>
       </div>
       </tal:istopic>
       </tal:loop>
      </div>

Attention, il faut adapter le code path='/nom-de-linstance/nom-de-linstance/accordion' et y mentionner le chemin du dossier accordion.

Le com de l'instance correspond généralement au nom de la commune. Pour la ville de huy, on obtiendrait:
path='/huy/huy/accordion'