Retour à la liste

Afficher / cacher un div avec un bouton +/-

Créé : 09.07.2013, 09:48:17  -  Modifié : 19.11.2018, 06:23:12

un script simple permettant d'afficher un bouton (ou autre) +/- afin d'afficher un div :

<script type="text/javascript">
//***************************************
//  bouton +/- pour afficher un div
//  <!-- Un bouton avec '+' dedans, et un onclick qui appelle une fonction avec -->
//  <!-- en param le bouton et l'id du div à afficher/masquer. -->
//  <button type="button" onclick="toggle_div(this,'id_du_div');">+</button>
//  <!-- Un div caché avec un attribut id -->
//  <div id="id_du_div" style="display:none;">
//***************************************
function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
  var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
  if(div.style.display=="none") { // Si le div est masqué...
    div.style.display = "block"; // ... on l'affiche...
    bouton.innerHTML = "-"; // ... et on change le contenu du bouton.
  } else { // S'il est visible...
    div.style.display = "none"; // ... on le masque...
    bouton.innerHTML = "+"; // ... et on change le contenu du bouton.
  }
}
</script>

Après il suffit d'indiquer :

<button type="button" onclick="toggle_div(this,'titre_a_indiquer');">+</button> Titre

Puis :



<div id="titre_a_indiquer" style="display:none;">

blabla

</div>
 Tag(s) css / javascript

Rendu :0.0668 | Mémoire :2.87MB

Accueil | Informations | Top