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

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

Salut il n'est pas forcement utile de passer par du JS pour faire ça...

https://codepen.io/anon/pen/gvWVvj?editors=1100#0

Voilà rien de plus simple 

merci beaucoup !

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

Il te suffit de remplacer &uarr; ou &darr;

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

https://www.w3schools.com/charsets/ref_utf_arrows.asp

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)

Sur le lien que je viens de te passer ta déjà tout, va voir sur l’onglet " Geometric shapes " à gauche.

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;
}

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

N'oublie pas de signaler le sujet comme résolu

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

ç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