Afficher ou Cacher un bloc à l'aide d'un lien
Procédure hors DizPerso... Très utilisée dans DizPerso et dans DizTest, j'ai pensé que certains d'entre vous seraient intéressés de pouvoir l'utiliser dans leur blog.
Cliquez pour cacher ou afficher les paragraphes ci-dessous >>>
Sur cette page, je vous présente le code qui permet d'afficher ou de cacher un bloc. Le système est en "javascript" mais utilisable sans risque dans Blog4ever puisque KL s'en sert dans les espaces de gestion et dans DizPerso.
Je l'utilise dans DizTest depuis sa création, également dans BRIC A BRAC, et sur cette page pour ce tutoriel.
Le script est installé dans toutes les pages des blogs, il fait partie du système, vous n'avez pas à vous en occuper. Je le met sur cette page pour information, également au cas ou il serait retiré du système, on pourrait le récupérer plus bas.
Le code :
<div id=100 style="display:block;">
**** texte des paragraphes ou de ce que vous voulez afficher/cacher ****
</div>
IMPORTANT : le code ci-dessus suffit pour réaliser un essai de cette procédure, vous pouvez le copier et en mode HTML le coller dans un article.
La suite de l'article est un exemple d'application...
Cliquez pour afficher ou cacher une copie des paragraphes ci-dessus >>>
Différences dans les 2 codes... Le Item ou numéro d'ordre, 100 et 101, car chaque bloc doit porter un numéro unique dans une page.
Le Style "display:block" pour que le bloc s'affiche à l'ouverture, "display:none" pour qu'il soit caché.
Le script...
Cacher ou Afficher - Code du script placé dans le head des pages >>>
function cache(id){
document.getElementById(id).style.display = 'none';
}
function show(id){
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display = 'block';
}
else
{
document.getElementById(id).style.display = 'none';
}
}
</script>
Exemples d'application de ce procédé...
Ci-dessous vous pouvez afficher le CSS ajouté pour la présentation de cette page.
Cacher ou Afficher - Code du style spécifique de la page >>>
<!--
#contenu
{
background : #EBEDAB;
padding: 10px;
border-width : 2px;
border-style : solid;
border-color : #009933;
}
#contenu p {margin-bottom: 15px;
}
/* =================================
--- Bloc code afficher/cacher ---
--------------------------------- */
.bloc_cacher
{
display: none;
background:#FFFFFF;
width:450px;
margin:auto;
padding:5px;
border: 4px inset #9D9D00;
white-space: pre;
overflow:auto;
}
/* =================================
--- Bloc code cacher/afficher ---
--------------------------------- */
.bloc_afficher
{
display: block;
background:#FFFFFF;
width:450px;
margin:auto;
padding:5px;
border: 4px inset #9D9D00;
white-space: pre;
overflow:auto;
}
-->
</STYLE>
Ce code peut être utilisé de 2 façons grâce à l'attribut "display" selon sa valeur "none" ou "block".
Première possibilité : le code CSS pour "afficher" un bloc "cacher"
Bloc code - afficher/cacher >>>
--- Bloc code afficher/cacher ---
--------------------------------- */
.bloc_cacher
{
display: none;
background:#FFFFFF;
width:450px;
margin:auto;
padding:5px;
border: 4px inset #9D9D00;
white-space: pre;
overflow:auto;
}
Deuxième possibilité : le code CSS pour "cacher" un bloc "afficher"
Bloc code - cacher/afficher >>>
--- Bloc code cacher/afficher ---
--------------------------------- */
.bloc_afficher
{
display: block;
background:#FFFFFF;
width:450px;
margin:auto;
padding:5px;
border: 4px inset #9D9D00;
white-space: pre;
overflow:auto;
}
Ces 2 régles de style, doivent être placées, pour les versions gratuites, au début de l'article, où vous les utiliserez, pour les autres versions dans la bordure, gauche ou droite, ainsi leur utilisation sera possible dans toutes les pages du blog.
Une fois ce CSS installé, il suffira de passer en mode HTML pour placer la commande "javascript", comme ci-dessous.
La commande pour "afficher" un bloc "cacher"
Est mise dans une balise lien: <a href="javascript:show(**)"> Texte du lien </a>
** Entre les paranthèses, le item du bloc, c'est un numéro qui doit être unique dans la page.
Ce numéro est repris dans la balise du bloc : <div id=1> par exemple
Insérer dans cette balise, également la "class":
- soit class="bloc_cacher" pour un bloc "cacher", qui s'affichera en cliquant sur le lien
- soit class="bloc_afficher" pour un bloc "afficher", qui se cachera en cliquant sur le lien
Bloc code - afficher/cacher >>>
<A href="javascript:show(**)">Texte du lien >>></A>
<div id=** class="bloc_cacher">texte du bloc </div>
La commande pour "cacher" un bloc "afficher"
Bloc code - cacher/afficher >>>
<A href="javascript:show(**)">Texte du lien >>></A>
<div id=** class="bloc_afficher"> texte du bloc </div>
Les attributs de ces 2 règles
- display : block... affiche le bloc
- display : none... cache le bloc
- background : #FFFFFF... couleur du fond du bloc
- width : 450px... largeur du bloc
- margin : auto... marges extérieures qui centre le bloc
- padding : 5px... marges ou espacements intérieurs
- border : 4px inset #9D9D00... paramètres bordures (épaisseur, style, couleur)
- white-space : pre... équivalent de la balise HTML <pre>, qui laisse le texte avec les retours à la ligne, mais avec des caractères ordinaires, très utile pour du code.
- overflow : auto... affiche les barres de défilement si nécessaire, cet attribut est obligatoire dans les cas de bloc à largeur réduite et de présentation de code préformaté avec l'attribut précédent.
Vous pouvez évidemment mettre d'autres attributs ou valeurs selon votre besoin.
L'utilisation de "white-space" n'est pas reconnue par tous les navigateurs, je mets la balise HTML "pre" en plus, avant le texte à afficher <pre> et à la fin </pre>.
Vous pouvez également éviter l'attribut "overflow" en élargissant le bloc, les barres de défilement ne sont pas très décoratives.
