Tutoriel : cacher, révéler, modifier un élément par simple click

[JF Lavrard]

J'utilise ce tutoriel pour faire apparaître du texte en cliquant sur la loupe +
Cela marche très bien pour une page simple de texte
Comment faut-il faire pour faire apparaître à partir d'un simple click plusieurs éléments de texte comme par exemple du texte puis des photos puis du texte sur plusieurs colonnes etc...
Lorsqu'on veut ainsi grouper plusieurs éléments, le logiciel, pour chacun des éléments insère en fin de page HTML un </div> qui empêche de lier les autres éléments suivants.

[FredVig]

Ce tutoriel ?
http://communautefrancophone.jimdo.com/contenu/cacher-r%C3%A9v%C3%A9ler-modifier-un-%C3%A9l%C3%A9ment-par-simple-clic/

il me semble que ce qui est "montré" ou "caché" lors d'un click est déterminé dans le html de chaque élément cliquable :
par exemple sur cette cellule (tuto de le fild'argent sur communautéfrancophone.jimdo.com) :

Code:

<td>
<a onclick="plusmoins('l1c2');cachemontre('l1c3');" href="#l0c0">
<img id="l1c2" src="URL de l'image loupeplus" alt="" /></a>
</td><td>

Je suppose que vous pourriez ajouter d'autres affichage :

Code:

<a onclick="plusmoins('l1c2');cachemontre('l1c3');plusmoins('l2c2');cachemontre('l2c3');plusmoins('l3c2');cachemontre('l3c3');" href="#l0c0">
<img id="l1c2" src="URL de l'image loupeplus" alt="" /></a>
</td><td>

[Alain]

Bonjour,

je pense que votre demande concerne un spoiler ! Dans ce cas je vous donne ceci comme exemple que j'ai réalisé sur un site :
Tout d'abord le CSS à mettre dans le head:

Code:

/**************spoiler événements*********************/

#container2 #content2 {
        height: 2em; /*hauteur du titre*/
        line-height:1.6em;
        margin: 2px;
        padding: 2px;
        overflow: hidden;
        background: url('votre image de fond')repeat;
        text-align:left;
        border: 1px solid black;
        transition: height 1s 0s linear;
        -moz-transition: height 1s 0s linear;
        -o-transition: height 1s 0s linear;
        -webkit-transition: height 1s 0s linear;
}
#container2:target #content2 {
        height: 14.7em; /* (nombre de lignes du texte) . (ligne-height) plus 0.5em ; */
}
#container2:target #hide2, #container2 #show2 {
        display: inline;
}
#container2:target #show2, #container2 #hide2 {
        display: none;
}
a.button2 {
        padding: 2px;
        border-radius: 3px;
        border: 1px solid #ccc;
        background: -moz-linear-gradient(0 0px -90deg, white, #f7f7f7 1px, #eee 9px, #dde 12px);
        background: -o-linear-gradient(top, white, #f7f7f7 1px, #eee 9px, #dde 12px);
        background: -webkit-gradient(linear, 0 0, 0 12, from(#fff), color-stop(.07, #f7f7f7), color-stop(.75, #eee), to(#f7f7f7));
}

Ensuite, vous mettez ce code dans un widget/html :

Code:

<div id="container2">
    <a id="hide2" href="#show2" class="button2" name="hide2">Fermer</a> <a id="show2" href="#container2" class="button2" name="show2">Ouvrir</a>
    <div id="content2">
        <h3>
            Evénements à venir<br/>
        </h3>
        23/05 - Karaoké de mai sur le thème "Chante comme il te plaît"<br/>
        20/06 - Karaoké d'été<br/>
        18/07 - Karaoké de Marianne<br/>
        08/08 - Karaoké des vacances<br/>
        19/09 - Karaoké de la Rentrée<br/>
        24/10 - Karaoké de l'Automne<br/>
        21/11 - Karaoké du Beaujolais<br/>
        12/12 - Karaoké de Noël<br/>
    </div>
</div>

Voir exemple ici en bas de page: http://www.aucafeduport.com/evenementiel/

L'ensemble est facile à comprendre. A vous de jouer !

Cordialement
Alain

[JF Lavrard]

Merci à vous deux pour votre aide.
Le spoiler ne correspond pas à ce que je voudrais obtenir.
J'ai adopté la solution de Fredvig mais cela ne marche pas sur deux série de HTML différentes.
Lors ce qu'on accepte la modification et que l'on enregistre, il s'écrit un </div> en fin de session, ce qui efface l'effet onclick pour une autre session HTML.
Merci de me dire s'il y a une autre solution que se débrouiller pour qu'il y ait qu'une seule session HTML à montrer
JF Lavrard

[FredVig]

Désolé, mais je ne vois pas ce que vous entendez par "session html"

[JF Lavrard]

Dans une page, lors ce que j'écris du texte je remplis une première session.
Si je veux passer à du texte en deux colonnes, j'ouvre une nouvelle session pour chacune des colonnes.
Si je veux insérer une image je dois ouvrir une autre session etc.
Chacune de ces sessions sont modifiables bloc par bloc. En fait, je désirerais ouvrir plusieurs blocs de suite avec un simple click sur le premier. Ce n'est peut être pas impossible ?

[FredVig]

Cela est certainement possible. C'est ce que vous propose Alain et le premier tuto daont vous parliez.
Il suffit de cibler non pas l'élément à faire apparaître, mais le contenant de tous les éléments.
Des propriétés comme transition, transform, delay (…) peuvent ajouter du dynamisme à ces affichages.

[Contenu sponsorisé]