WordPress : Comment créer un accordéon avec 2 colonnes à l’intérieur

Je réponds aujourd’hui à une demande de Marie faites sur le groupe Facebook « WordPress France Entraide » :

J’aimerais faire un accordéon avec 2 colonnes à l’intérieur :
• colonne de gauche = photo
• colonne de droite = description
J’arrive à créer un accordéon mais avec une seule colonne à l’intérieur seulement.

Soit je pense, obtenir le résultat final suivant :

État des lieux

Lorsque vous créez une page éditée avec Elementor, le widget « Accordéon » fait en effet partie la catégorie « Général ».

Une fois glissé sur votre page, puis un des items par défaut ouvert, vous obtenez une fenêtre de contenu comportant 2 options : Visuel ou Texte.

Comme souvent avec ces menus de contenu WordPress, il va nous falloir un peu de HTML et de CSS pour parvenir à nos fins.

Créer des tableaux HTML

Un tableau en HTML se définit avec le tag <table> en ouverture puis </table> en fermeture.

En allant à l’essentiel, vous pouvez créer une rangée avec le tag <tr> (</tr> en fermeture), puis autant de colonnes que nécessaire avec le tag <td> (</td> en fermeture).

Le code HTML pour le tableau de Marie pourrait donc être :

<table>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
</table>

Mettre en forme un tableau HTML avec du CSS

Parfois il est nécessaire d’ajuster un peu la mise en forme d’un tableau, par exemple ici, faire en sorte que la photo 1/3 de la longeur de la rangée, que le contenu des cellules respire un peu par rapport aux bords, et éventuellement épaissir et noircir les bordures.

La première étape va donc consister à déclarer une classe à ma table, le code précédent devient donc :

<table class="monaccordeon">
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
</table>

Ensuite pour maintenir la première colonne à environ 1/3 de la longueur de la rangée je peux préciser la largeur (width) pour la première colonne (les autres suivront), ce qui donnera :

<table class="monaccordeon">
      <tr>
         <td width="30%">Photo</td>
         <td>Description</td>
      </tr>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
      <tr>
         <td>Photo</td>
         <td>Description</td>
      </tr>
</table>

Enfin, dans le menu « Avancé » de mon widget « Accordéon » je peux alors insérer du CSS personnalisé, par exemple :

.monaccordeon {
	border:1px solid #C0C0C0;
	border-collapse:collapse;
	padding:5px;	
}
.monaccordeon td {
	border:1px solid #C0C0C0;
}

Le résumé en vidéo

Quelques références utiles :

• https://www.w3schools.com/html/html_tables.asp
• https://www.w3schools.com/css/css_table.asp
• https://www.rapidtables.com/web/tools/html-table-generator.html
• https://www.freeformatter.com/html-formatter.html