Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par JF Lavrard le Lun 28 Déc 2015 - 23:32

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.

JF Lavrard

Messages : 3
Date d'inscription : 17/12/2015

http://guillaumedesonnac.com

Revenir en haut Aller en bas

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

Message par FredVig le Mar 29 Déc 2015 - 11:02

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>

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1790
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Alain le Mar 29 Déc 2015 - 15:03

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
avatar
Alain

Messages : 134
Date d'inscription : 06/10/2014

http://newtemplates2.jimdo.com/

Revenir en haut Aller en bas

Merci

Message par JF Lavrard le Mar 29 Déc 2015 - 18:20

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

JF Lavrard

Messages : 3
Date d'inscription : 17/12/2015

http://guillaumedesonnac.com

Revenir en haut Aller en bas

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

Message par FredVig le Mar 29 Déc 2015 - 19:44

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

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1790
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

suite

Message par JF Lavrard le Mar 29 Déc 2015 - 22:18

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 ?

JF Lavrard

Messages : 3
Date d'inscription : 17/12/2015

http://guillaumedesonnac.com

Revenir en haut Aller en bas

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

Message par FredVig le Lun 11 Jan 2016 - 16:43

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.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1790
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

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

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum