Il s’agit dans ce cas assez courant de déclencher l’apparition de blocs d’informations grâce à un clic sur un élément quelconque (image, texte, etc.).
Cet exemple assume que jquery est installé.
Code html
<ul id="liste">
<li><a href="#bloc1">Un bloc</a></li>
<li><a href="#bloc2">Un autre</a></li>
<li><a href="#bloc3">Un troisième</a></li>
</ul>
<section id="blocs">
<article id="bloc1">
<h2>Contenu du bloc 1</h2>
</article>
<article id="bloc2">
<h2>Contenu du bloc 2</h2>
</article>
<article id="bloc3">
<h2>Contenu du bloc 3</h2>
</article>
</section>Le code CSS
Aucun code superflu ici. Les blocs d’information sont mis en position fixed et position hors de la fenêtre (avec right : -410px). Lorsque la classe ’.show" est ajoutée à l’élément, il glisse grâce à la transition jusqu’à "right:0", ce qui le fait apparaitre.
#blocs article {
width:400px;
background-color:#fff;
padding:20px;
box-sizing: border-box;
box-shadow:0 0 10px #ccc;
position:fixed;
right:-410px;
bottom:10px;
transition:right 0.5s linear;
}
#blocs article.show {
right:0;
}Le code javascript
Ce code a pour unique but d’ajouter ou retirer la classe "show" aux blocs de contenus, le reste est opéré par la CSS.
Le code javascript sélectionne les liens de la liste. Lors du clic, il récupère l’id du bloc correspondant au lien. Il vérifie que ce bloc correspondant n’est pas déjà visible. Si c’est le cas, il le cache simplement, sinon il retire la classe show de tous les éléments éventuellement visibles, puis ajoute alors la classe "show" à cet élément, ce qui le fait apparaitre.
<script>
$("#liste a").click(function(){
var lequel=$(this).attr("href");
if($(lequel).hasClass("show")){
$(lequel).removeClass("show");
} else {
$("#blocs article").removeClass("show");
$(lequel).addClass("show");
}
return false;
});
</script>