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.

texte accordéon

Aller en bas

texte accordéon

Message par annatschopp le Mer 7 Fév 2018 - 16:36

bonjour à tous,
nouveau sur le forum, j'essaie depuis  q jours à intégrer un texte avec effet accordéon expliqué sur l'aide Jimdo
le résultat ne marche pas car il faut intégrer un morceau de code dans le header et un autre dans le widget/html
je suis tout à la lettre et pourtant le résultat n'est pas là Sad
merci pour vos lumières

annatschopp

Messages : 3
Date d'inscription : 07/02/2018

http://annatschopp.com

Revenir en haut Aller en bas

Re: texte accordéon

Message par FredVig le Mer 7 Fév 2018 - 19:40

Des liens please vers vos essais et le tuto jimdo.

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: texte accordéon

Message par annatschopp le Jeu 8 Fév 2018 - 9:26

je ne peux pas envoyer de liens avant 7 jours!!! restrictions jimdo Shocked Shocked Shocked

annatschopp

Messages : 3
Date d'inscription : 07/02/2018

http://annatschopp.com

Revenir en haut Aller en bas

Re: texte accordéon

Message par FredVig le Jeu 8 Fév 2018 - 10:49

J'ai essayé ce tuto :
https://aide.jimdo.com/aller-plus-loin-avec-jimdo/texte-accordeon/

Le code est en trois parties :

un code javascript (moteur du comportement)
un code css (aspect des éléments visibles)
un code html (structure des éléments visibles)

Si le dispositif doit apparaître à plusieurs endroits du site, il faut placer le code javascript et la partie css dans "modifier le head", comme expliqué dans le tuto.

Par contre, si c'est un dispositif unique, vous pouvez rassembler les 3 codes dans un même widget html, à l'emplacement où doit apparaitre le module et dans le bon ordre :

Code:
<script type="text/javascript">
//<![CDATA[
function Toggle(id){
var onoff = document.getElementById("texte"+id);
if(onoff.style.display == "") {
onoff.style.display = "none";
} else {
onoff.style.display = "";
}
}
//]]>
</script>
<style type="text/css">
.tog-title {
padding: 0 20px;
margin: 0 -20px;
background-color: rgb(109, 194, 237);
cursor: pointer;
line-height: 2em;
}
.tog-text {
background-color: rgb(201, 237, 245);
padding: 20px;
margin: 0 -20px;
}
</style>
<div id="accordeon-container">
    <h3 onclick="javascript:Toggle(1)" class="tog-title">
        Qui sommes-nous ?
    </h3>
    <div id="texte1" class="tog-text" style="display:none;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices nec ex eget gravida. Nunc eleifend lacus lorem, ac maximus ex tempor eu. Phasellus elit justo, lacinia vitae
            quam et, ultricies vehicula nulla. Vestibulum purus nisl, placerat non convallis id, cursus et ex. Quisque mollis, ipsum et egestas elementum, tortor enim semper nunc, vitae blandit
            libero orci quis sem.
        </p>
    </div>
     <h3 onclick="javascript:Toggle(2)" class="tog-title">
        Second titre
    </h3>
    <div id="texte2" class="tog-text" style="display:none;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices nec ex eget gravida. Nunc eleifend lacus lorem, ac maximus ex tempor eu. Phasellus elit justo, lacinia vitae
            quam et, ultricies vehicula nulla. Vestibulum purus nisl, placerat non convallis id, cursus et ex. Quisque mollis, ipsum et egestas elementum, tortor enim semper nunc, vitae blandit
            libero orci quis sem.
        </p>
    </div>
     <h3 onclick="javascript:Toggle(3)" class="tog-title">
Troisième exemple de titre
    </h3>
    <div id="texte3" class="tog-text" style="display:none;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices nec ex eget gravida. Nunc eleifend lacus lorem, ac maximus ex tempor eu. Phasellus elit justo, lacinia vitae
            quam et, ultricies vehicula nulla. Vestibulum purus nisl, placerat non convallis id, cursus et ex. Quisque mollis, ipsum et egestas elementum, tortor enim semper nunc, vitae blandit
            libero orci quis sem.
        </p>
    </div>
</div>

Chaque fois que vous voulez ajouter un paragraphe supplémentaire, dupliquez la partie

Code:
<h3 onclick="javascript:Toggle(3)" class="tog-title">
Troisième exemple de titre
    </h3>
    <div id="texte3" class="tog-text" style="display:none;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices nec ex eget gravida. Nunc eleifend lacus lorem, ac maximus ex tempor eu. Phasellus elit justo, lacinia vitae
            quam et, ultricies vehicula nulla. Vestibulum purus nisl, placerat non convallis id, cursus et ex. Quisque mollis, ipsum et egestas elementum, tortor enim semper nunc, vitae blandit
            libero orci quis sem.
        </p>
    </div>

Et remplacez les chiffres , dans :
<h3 onclick="javascript:Toggle(X)" class="tog-title">Qui sommes-nous ?</h3>
<div id="texteX" class="tog-text" style="display:none;">

par le numéro correspondant à l'ordre de votre paragraphe.

Les titres prennent l'aspect de vos titres de niveau 3.
Remplacez les h3 par h1 ou h2 si vous voulez leur donner l'aspect des autres titres

L'aspect des fonds est déterminé par la partie css :
Code:


<style type="text/css">
.tog-title {
padding: 0 20px;
margin: 0 -20px;
background-color: rgb(109, 194, 237);
cursor: pointer;
line-height: 2em;
}
.tog-text {
background-color: rgb(201, 237, 245);
padding: 20px;
margin: 0 -20px;
}
</style>

Cet aspect peut être modifié très largement, en changeant les valeurs ou/et les propriétés par du code html.

ça doit donner ça :
https://fredvig.jimdo.com/actu/testtexteaccordeon/


Dernière édition par FredVig le Lun 12 Fév 2018 - 23:02, édité 1 fois

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

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

http://fredvig.com

Revenir en haut Aller en bas

Re: texte accordéon

Message par annatschopp le Jeu 8 Fév 2018 - 16:18

bravo et merci mais avec un peu de patience et de persévérence , j'ai fini par trouver avec les mêmes résultats que vous.
Donc oui ça marche Wink

annatschopp

Messages : 3
Date d'inscription : 07/02/2018

http://annatschopp.com

Revenir en haut Aller en bas

Re: texte accordéon

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

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