Afficher ou Cacher un bloc à l'aide d'un lien
ACCUEIL <<< Partie "Contenu" <<<
 |
 |
 |
 |
 |
 |
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 >>>
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=101 style="display:none;">
**** texte des paragraphes ou de ce que vous voulez afficher/cacher ****
</div>
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.
Commentaires
imad68 site : mansoura.blog4ever.com | le 06/08/2008 à 20:06:45Bonsoir
J'ai essayé l'astuce mais ça ne marche pas. Peut être je me suis trompé quelques parts , l'essentiel c'est d'avoir tenter l'expérience.
Merci papy clic c'est vraiment génial ce que vous faites.
papyclic site : diztest.blog4ever.com | le 07/08/2008 à 01:15:37
Bonjour ou Bonsoir
J'ai regardé le source du blog "mansoura", tu as mélangé le code avec une application de ce procédé avec une régle CSS. Le premier code indiqué en début d'article suffit.
Dans ton blog...
Il faut remplacer les **
javascript:show(100)
par un nombre dans mon premier exemple 100 puis ce même nombre le mettre dans l'ID du DIV...
div id=100 style="display:block;"
Remplacer le texte suivant :
"**** texte des paragraphes ou de ce que vous voulez afficher/cacher ****"
par ton texte.
De cette façon ça doit fonctionner, tiens-moi au courant.
Bonne continuation
Cordialement
imad68 site : mansoura.blog4ever.com | le 07/08/2008 à 16:31:51
Bonjour
Merci papyclick , ça marche. J'étais sur que je me suis trompé quelque part.
Je vous remercie pour votre secours et assistance.
papyclic site : diztest.blog4ever.com | le 07/08/2008 à 17:18:02
Bonjour
Ok! c'est super... j'ai ajouté un encart à ce sujet dans mon article, un autre bloggueur avait commis la même erreur.
Bonne journée
Ramzi6416 site : http://educateurvirtuel.blog4ever.com/blog/index-234413.html | le 01/09/2008 à 12:18:36
Bonjour,je veux un conseille de votre pour rendre la page d'accueil plus efficace et attrayant!
Merci d'avance!
PapyClic le 01/09/2008 à 18:45:16
Bonjour Ramzilog
Ton blog est déjà bien fourni et organisé, le contenu est sérieux, il ne manque pas grand chose.
Très difficile de répondre à une question à réponses multiples. Déjà ici sur ce blog voir pour mettre une bannière ou un logo... sur la page d'accueil mettre les derniers articles parus. Dans l'espace de gestion >>> Votre blog >>> Page d'accueil en bas >>> Contenu dynamique. Sur Blog4ever il y a le forum d'aide pour répondre à cette question, d'autres bloggueurs y participent, c'est plus facile d'échanger des messages.
Une question précise sur DizTest, par mail en cliquant sur le lien "Contacter l'auteur" en bas ou sur le bouton de la barre flottante à gauche en bas de l'écran.
Bonne continuation et bon courage pour la rentrée.
Ramzi6416 le 02/09/2008 à 20:07:19
merci beaucoup!bonne continuation à vous!