Ouvrir un article<p> en cliquant sur son titre <h4>
jjaco
Messages postés
575
Statut
Membre
-
RAD ZONE Messages postés 5362 Statut Contributeur -
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjour,
j'ai comme ça plusieurs articles avec des textes un peu long. Je sais que je peux utiliser la propriété fixed et overflow, mais existe-t-il en html5 css3 quelquechose qui me permettrait d'aligner les titres<h4> les uns sous les autres en cachant les contenus <p> et que ceux-ci ne s'ouvrent qu'au clic sur le titre? sans devoir ouvrir un lien ...
<article>
<h4>titre de l'article</h4>
<p>contenu:blablabla......... bla bla bla</p>
</article>
en posant la question je pense que je peux mettre mes titres en <aside> avec un lien ancre...
merci de vos conseils
j'ai comme ça plusieurs articles avec des textes un peu long. Je sais que je peux utiliser la propriété fixed et overflow, mais existe-t-il en html5 css3 quelquechose qui me permettrait d'aligner les titres<h4> les uns sous les autres en cachant les contenus <p> et que ceux-ci ne s'ouvrent qu'au clic sur le titre? sans devoir ouvrir un lien ...
<article>
<h4>titre de l'article</h4>
<p>contenu:blablabla......... bla bla bla</p>
</article>
en posant la question je pense que je peux mettre mes titres en <aside> avec un lien ancre...
merci de vos conseils
1 réponse
-
Salut
si tu ne veux pas utiliser du js , tu peux le faire avec un truc html css dans ce style avec ancre et target
<!DOCTYPE html>
<html>
<head>
<title>
RAD ZONE Webcreation
</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.contenu > p {
display: none;
}
.contenu > p:target {
display: block;
}
h4 a{
text-decoration: none;
color: #000000;
}
-->
</style>
</head>
<body>
<article>
<h4>
<a href="#p1">titre de l'article</a>
</h4>
<div class="contenu">
<p id="p1">
contenu 1:blablabla......... bla bla bla
</p>
</div>
<h4>
<a href="#p2">titre de l'article 2</a>
</h4>
<div class="contenu">
<p id="p2">
contenu 2:blablabla......... bla bla bla2
</p>
</div>
<h4>
<a href="#p3">titre de l'article 3</a>
</h4>
<div class="contenu">
<p id="p3">
contenu 3:blablabla......... bla bla bla3
</p>
</div>
<h4>
<a href="#p4">titre de l'article 4</a>
</h4>
<div class="contenu">
<p id="p4">
contenu 4:blablabla......... bla bla bla4
</p>
</div>
</article>
</body>
</html>
a+
