Partage

apparition d'un texte lors d'un clic

Sujet résolu
12 février 2018 à 12:15:00

bonjour!

J'aimerai savoir si il est possible en html/css de faire apparaitre un paragraphe qui serait caché en appuyant sur un bouton (enfin ou une petite fleche que je voudrais mettre a coté du titre).

merci

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
12 février 2018 à 12:59:52

Hello,

<script>

var clicAfficher = document.getElementById("id de la balise avec ta fleche"),

afficherTexte = document.getElementById("id de la balise cacher");

clicAfficher.addEventListener ("click", function (){

afficherTexte.style.display = "block";

clicAfficher.style.display = "none";

});

</script>

on récupère les 2 objets ( les 2 balises ) grâce à leur id. On met en place un événement click, lors du clic la function est lue et change les propriété CSS de ces 2 balises html le none devient un block et la balise block un none.

 Sinon en html il existe l'attribut onclick mais toujours le besoin de lui attribuer une fonction de retour ou écouteur.

Pour plus d'infos va voir sur le site du w3c onclick.

J'espère t'avoir aider, tout en restant aussi clair :)

-
Edité par Alby57600 12 février 2018 à 13:36:03

12 février 2018 à 14:38:50

merci beaucoup !

mais comment je dois faire pour mettre ce que je veux a la place de la fleche ?

12 février 2018 à 16:57:06

oui bien sur mais par quoi ? parce que je ne trouve pas sur internet le code pour des petits triangles

12 février 2018 à 17:13:20

Il te suffi de chercher un petit peut... mais nous ne sommes pas dans ta tête alors sans image impossible de t'aider car des triangle il en existe plein, des vides, des plein etc... mais bon je vais parier sur (&#9650; et &#9660)
12 février 2018 à 17:42:52

Sur le lien que je viens de te passer ta déjà tout, va voir sur l’onglet " Geometric shapes " à gauche.
12 février 2018 à 17:54:13

Essaie ca sans javascript:

<contenus>
  <h4>Cliquer pour voir les contenus</h4> <a href="#">[&#9650;]</a> <a href="#afficher">[&#9660;]</a>
  <p id="afficher">Un coup je suis là, un coup j'suis plus la
   salut! merci pour votre visite
 
  </p>
</contenus>

codes css3

a{color:inherit; text-decoration:none;}
h4{display:inline-block;}
p{display:none;}
p:target{display:block;}

#afficher
{
opacity: 0.8;/*transparence*******/

background : #106b64;
border: 1px solid  white;
border-radius: 3px;
font-size: 1.3em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
height: 8%;
width: 45%;
margin-left: 34%;

}
#afficher:hover
{
    background : white;
opacity: 0.8;/*transparence*******/
color:white;	
z-index: 3;	
border: 2px solid  #34495e;
color:  #34495e;
}



12 février 2018 à 18:17:31

merci beaucoup c'est juste que je recherchais au mauvais endoit :euh:

12 février 2018 à 19:39:00

et j'aimerais aussi savoir comment faire pour en faire 2 sur une meme page car quand je clique sur la fleche du 2eme il ouvre le truc du 1er
12 février 2018 à 21:55:16

ça marche par ancre, tu dois mettre le même nom de ton ancre à l'id de ta balise <p> pour que le target puisse identifier l'objet qui à été cliquer.

-
Edité par Alby57600 12 février 2018 à 21:55:43

apparition d'un texte lors d'un clic

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown