Bonjour,
j'ai un petit code JS qui fonctionne à 95% mais je n'arrive pas à finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne afin d'ouvrir le content la flèche qui accompagne le texte se retrouve son css original (cad bleue et tournée vers la droite au lieu de jaune vers le bas).
PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et JS, ils s'affichent bizzarement ici :-/
Une suggestion?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Yliur
Le Sat, 21 Nov 2020 02:57:49 -0600, Vanouille a écrit :
Bonjour, j'ai un petit code JS qui fonctionne Í 95% mais je n'arrive pas Í finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne afin d'ouvrir le content la flèche qui accompagne le texte se retrouve son css original (cad bleue et tournée vers la droite au lieu de jaune vers le bas). PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et JS, ils s'affichent bizzarement ici :-/ Une suggestion?
C'est bizarre, ça devrait fonctionner. Si ce code n'est pas particulièrement sensible tu peux sans doute utiliser un service en ligne tel que celui-ci : https://pastebin.com/
Le Sat, 21 Nov 2020 02:57:49 -0600, Vanouille a écrit :
Bonjour,
j'ai un petit code JS qui fonctionne Í 95% mais je n'arrive pas Í
finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en
ligne afin d'ouvrir le content la flèche qui accompagne le texte se
retrouve son css original (cad bleue et tournée vers la droite au lieu
de jaune vers le bas).
PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et
JS, ils s'affichent bizzarement ici :-/
Une suggestion?
C'est bizarre, ça devrait fonctionner. Si ce code n'est pas
particulièrement sensible tu peux sans doute utiliser un service en ligne
tel que celui-ci : https://pastebin.com/
Le Sat, 21 Nov 2020 02:57:49 -0600, Vanouille a écrit :
Bonjour, j'ai un petit code JS qui fonctionne Í 95% mais je n'arrive pas Í finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne afin d'ouvrir le content la flèche qui accompagne le texte se retrouve son css original (cad bleue et tournée vers la droite au lieu de jaune vers le bas). PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et JS, ils s'affichent bizzarement ici :-/ Une suggestion?
C'est bizarre, ça devrait fonctionner. Si ce code n'est pas particulièrement sensible tu peux sans doute utiliser un service en ligne tel que celui-ci : https://pastebin.com/
SAM
Le 21/11/2020 Í 09:57, Vanouille a écrit :
Bonjour, j'ai un petit code JS qui fonctionne Í 95% mais je n'arrive pas Í finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne afin d'ouvrir le content la flèche qui accompagne le texte se retrouve son css original (cad bleue et tournée vers la droite au lieu de jaune vers le bas). PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et JS, ils s'affichent bizzarement ici :-/ Une suggestion?
Tu mets en ligne ta page ou bien un extrait fonctionnel. Í mon idée il doit suffire de changer le style du § parent pour en changer la fleche et déplier le content. Le re-clic supprimant le style, la classe, le mode par défaut se rétablit avec la fleche itou Une simple fonction "toggle" devrait faire le travail. <!DOCTYPE html> <html> <head> <title>exemple - test de contenu dépliable</title> <style> div { position: relative; margin: 10px 0; padding: 0 } h2, h3 { width: 100%; margin: 0; } h2 { background: url("https://img.icons8.com/color/2x/sort.png") #ddd no-repeat bottom right } div:hover { cursor: pointer } div:hover h2 { background-color: yellow; background-position: 98% 100%; } div:active h2, div:focus h2 { background: orange center right } .content { width: 80%; margin-left: 20%; display: none; border: 1px solid; } .voir h2 { background-position: top right } .voir .content { display: block } .voir:hover h2 { background-position: 98% 0% } </style> <script> function voir(x) { x.classList.toggle("voir"); } </script> </head> <body> <div onclick="voir(this)"> <h2>titre blabla 1</h2> <div class="content"> <h3>sous-titre 1</h3> <p>blabla 1</p> <p>re blabla 1</p> </div> </div> <div onclick="voir(this)"> <h2>titre blabla 2</h2> <div class="content"> <h3>sous-titre 2</h3> <p>blabla 2</p> <p>re blabla 2</p> </div> </div> </body> </html>
Le 21/11/2020 Í 09:57, Vanouille a écrit :
Bonjour,
j'ai un petit code JS qui fonctionne Í 95% mais je n'arrive pas Í finaliser la
manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne afin d'ouvrir
le content la flèche qui accompagne le texte se retrouve son css original (cad
bleue et tournée vers la droite au lieu de jaune vers le bas).
PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et JS, ils
s'affichent bizzarement ici :-/
Une suggestion?
Tu mets en ligne ta page ou bien un extrait fonctionnel.
Í mon idée il doit suffire de changer le style du § parent pour en
changer la fleche et déplier le content.
Le re-clic supprimant le style, la classe, le mode par défaut se
rétablit avec la fleche itou
Une simple fonction "toggle" devrait faire le travail.
Bonjour, j'ai un petit code JS qui fonctionne Í 95% mais je n'arrive pas Í finaliser la manoeuvre. Je voudrais que lorsque l'on clique de ligne en ligne afin d'ouvrir le content la flèche qui accompagne le texte se retrouve son css original (cad bleue et tournée vers la droite au lieu de jaune vers le bas). PS: je ne comprends pas comment vous faire voir mes codes HTML, CSS et JS, ils s'affichent bizzarement ici :-/ Une suggestion?
Tu mets en ligne ta page ou bien un extrait fonctionnel. Í mon idée il doit suffire de changer le style du § parent pour en changer la fleche et déplier le content. Le re-clic supprimant le style, la classe, le mode par défaut se rétablit avec la fleche itou Une simple fonction "toggle" devrait faire le travail. <!DOCTYPE html> <html> <head> <title>exemple - test de contenu dépliable</title> <style> div { position: relative; margin: 10px 0; padding: 0 } h2, h3 { width: 100%; margin: 0; } h2 { background: url("https://img.icons8.com/color/2x/sort.png") #ddd no-repeat bottom right } div:hover { cursor: pointer } div:hover h2 { background-color: yellow; background-position: 98% 100%; } div:active h2, div:focus h2 { background: orange center right } .content { width: 80%; margin-left: 20%; display: none; border: 1px solid; } .voir h2 { background-position: top right } .voir .content { display: block } .voir:hover h2 { background-position: 98% 0% } </style> <script> function voir(x) { x.classList.toggle("voir"); } </script> </head> <body> <div onclick="voir(this)"> <h2>titre blabla 1</h2> <div class="content"> <h3>sous-titre 1</h3> <p>blabla 1</p> <p>re blabla 1</p> </div> </div> <div onclick="voir(this)"> <h2>titre blabla 2</h2> <div class="content"> <h3>sous-titre 2</h3> <p>blabla 2</p> <p>re blabla 2</p> </div> </div> </body> </html>
