Javascript: afficher - masquer dit effet Toogle
Après quelques vacances, les coulisses d'Expérience31 sont de retour... Ce petit article sort un peu du lot car il s'agit cette fois d'un peu de code pour les webmasters. Vous devez connaitre la fonction "Afficher / Masquer" représentée souvent par un + ou -, mais également connue sous le nom de Toogle. Non, dans ce cas, Toogle n'est pas la version "texte" du projet de recherche d'image de Google, mais une petit fonction Javascript qui vous permettra d'afficher et de masquer une partie de votre contenu se trouvant dans votre page web.... voyons çà de plus près!
Je vais donc vous présenter la version simple et optimiser pour tous les navigateurs. Donc pas d'effet de transition à l'aide de framework Javascript ou autres...Exit Prototype, Mootools, SimpleJS et les autres...
Le principe est simple:
1- Création de la page XHTML strict
Je crée un page XHTML strict pour l'exemple, bien entendu l'encodage de la page et son type ne joue pas de rôle dans le fonctionnement de la fonction.
2- Définition du bloc à afficher / masquer
Cette étape comporte 2 étapes:
Le bloc visible servant à appeler la fonction javascript se compose d'un argument qui est l'id du bloc masqué. Le bloc masqué contient un attribut id servant à l'identifier et à attribuer la fonction à ce bloc en l'occurrence. "display : none" sert à masquer par défaut le bloc. En donnant le même id a plusieurs blocs, l'appel de la fonction affichera et masquera l'ensemble des blocs.
3- Création de la fonction javascript
La fonction javascript est a intégré dans les balises d'entête "head" de votre page web. Elle a pour particularité d'être simple, légère et donc rapide. Une seule fonction est nécessaire pour afficher et masquer les blocs...
Bien entendu, cette fonction requière que le Javascript soit activé sur l'ordinateur de l'internaute.
Cette fonction peut être amélioré par exemple en remplaçant le "afficher" par "masquer" et inversement lors de l'exécution de la fonction, ou encore en rajoutant des effets de transtions... mais là, je vous conseille d'utiliser les frameworks Javascript.
Je vais donc vous présenter la version simple et optimiser pour tous les navigateurs. Donc pas d'effet de transition à l'aide de framework Javascript ou autres...Exit Prototype, Mootools, SimpleJS et les autres...
Le principe est simple:
- Une page (x)html
- Les blocs à masquer ou afficher
- La fonction Javascript
1- Création de la page XHTML strict
Je crée un page XHTML strict pour l'exemple, bien entendu l'encodage de la page et son type ne joue pas de rôle dans le fonctionnement de la fonction.
2- Définition du bloc à afficher / masquer
Cette étape comporte 2 étapes:
- définir la zone (texte, bloc, image) qui va appelé la fonction javascript et permettre de réaliser l'effet voulu.
- définir la zone qui va être afficher et masquer
Le bloc visible servant à appeler la fonction javascript se compose d'un argument qui est l'id du bloc masqué. Le bloc masqué contient un attribut id servant à l'identifier et à attribuer la fonction à ce bloc en l'occurrence. "display : none" sert à masquer par défaut le bloc. En donnant le même id a plusieurs blocs, l'appel de la fonction affichera et masquera l'ensemble des blocs.
div onclick="tooglebox('blocmasque')"
Experience31
/div
div id="blocmasque" style="display: none;"
www.experience31.fr
/div
3- Création de la fonction javascript
La fonction javascript est a intégré dans les balises d'entête "head" de votre page web. Elle a pour particularité d'être simple, légère et donc rapide. Une seule fonction est nécessaire pour afficher et masquer les blocs...
script language="javascript" type="text/javascript"
// Affiche ou masque les details d'une zone
// idDetail : id de l'element contenant le detail
function tooglebox(idDetail) {
var style = document.getElementById(idDetail).style;
style.display = (style.display == "none") ? "" : "none";
}
/script
Bien entendu, cette fonction requière que le Javascript soit activé sur l'ordinateur de l'internaute.
Cette fonction peut être amélioré par exemple en remplaçant le "afficher" par "masquer" et inversement lors de l'exécution de la fonction, ou encore en rajoutant des effets de transtions... mais là, je vous conseille d'utiliser les frameworks Javascript.
Libellés : développement
