Ouvrir un article<p> en cliquant sur son titre <h4>
jjaco
Messages postés
534
Date d'inscription
Statut
Membre
Dernière intervention
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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
A voir également:
- Ouvrir un article<p> en cliquant sur son titre <h4>
- Comment ouvrir un fichier epub ? - Guide
- Comment ouvrir un fichier bin ? - Guide
- Ouvrir un fichier .dat - Guide
- Comment ouvrir un fichier docx ? - Guide
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
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
a+
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+
