Qu’est ce qu’un accordéon en développement web
Un accordéon, sur le web, est un mode d’affichage dans lequel on affiche pour chaque élément une barre horizontale, et en clic on déplie l’information complète.
Un code déjà prêt sur le site de Bootstrap
En fait, les systèmes d’accordéon sont couant sur le web, et Bootstrap dispose de codes html/css/javascript intégrés. Il nous suffit donc de copier le code sur le site de documentation de Bootstrap et de le placer dans un template part pour que ça marche.
Il n’y a même pas à placer de code javascript, le tout fonctionne d’emblée.
Placer le code de la boucle Wordpress
Le seul travail à faire sera donc d’intégrer la boucle wordpress à ce code, et choisir quelles informations afficher.
Voici un premier exemple simple avec le titre dans la partie visible et le reste de l’article dans la partie cachée.
<?php
// code à placer dans un template_part
// on garde la requete par defaut
$temp_query = $wp_query;
$args = array(
'post_type' => array( 'post' ),
//'category_name' => 'identite-graphique,illustration',
'posts_per_page' => '10',
'order_by' => 'ASC',
);
query_posts($args);
$compteur=0;
?>
<main class="container py-5">
<?php if(have_posts()) : ?>
<div class="accordion accordion-flush" id="accordeon_theme_base">
<?php while(have_posts()) : the_post(); ?>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading<?php the_id(); ?>">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php the_id(); ?>" aria-expanded="false" aria-controls="flush-collapse<?php the_id(); ?>">
<?php the_title(); ?>
</button>
</h2>
<div id="flush-collapse<?php the_id(); ?>" class="accordion-collapse collapse" aria-labelledby="flush-heading<?php the_id(); ?>" data-bs-parent="#accordeon_theme_base">
<div class="accordion-body">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</main>
<?php
/* retrouver la query de base */
$wp_query = $temp_query; ?>Il est à noter qu’il n’est pas possible de placer des liens dans la partie "titre" de l’accordéon : cliquer sur cette partie ouvre ou ferme le contenu, c’est tout.
Voici une exemple plus poussé, avec un logo et les catégories en plus.
Son code :
<?php
// on garde la requete par defaut
$temp_query = $wp_query;
$args = array(
'post_type' => array( 'post' ),
//'category_name' => 'identite-graphique,illustration',
'posts_per_page' => '10',
'order_by' => 'ASC',
);
query_posts($args);
$compteur=0;
?>
<main class="container py-5">
<?php if(have_posts()) : ?>
<div class="accordion accordion-flush" id="accordeon_theme_base">
<?php while(have_posts()) : the_post(); ?>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading<?php the_id(); ?>">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse<?php the_id(); ?>" aria-expanded="false" aria-controls="flush-collapse<?php the_id(); ?>">
<div class="row w-100 align-items-end justify-content-start decoration-hover">
<div class="col-auto">
<?php the_post_thumbnail('rectangle', array( 'class' => 'image_accordeon' )); ?>
</div>
<div class="col titre-grand">
<?php the_title(); ?>
</div>
<div class="col texte-minus pe-5 text-end">
<?php the_category(', '); ?>
</div>
</div>
</button>
</h2>
<div id="flush-collapse<?php the_id(); ?>" class="accordion-collapse collapse" aria-labelledby="flush-heading<?php the_id(); ?>" data-bs-parent="#accordeon_theme_base">
<div class="accordion-body">
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</main>
<style>
.image_accordeon {
height:3em;
width:auto;
}
</style>
<?php
/* retrouver la query de base */
$wp_query = $temp_query; ?>Le résultat :
