Comment faire apparaitre un texte entre 2 lignes ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment faire apparaitre un texte entre 2 lignes ?

nero27

Bonjour,

Voilà mon problème : je voudrais pouvoir faire apparaitre un texte entre 2 lignes, mais je ne sais pas comment m'y prendre.
Je sais c'est pas très clair dit comme ça : voilà un expemple !

Voilà ce qu'on doit voir au départ :

Citation :

- Titre1
- Titre2
- Titre3
- Titre4
- ...

Je voudrais qu'en cliquant sur l'un des titres on puisse voir le texte qui lui est lié comme ceci, sans chargement de page :

Citation :

- Titre1
Test test test test test test test test test test test test test test
Test test test test test test test test test test test test test test
Test test test test test test test test test test test test test test
Test test test test test test test test test test test test test test
Test test test test test test test test test test test test test test
Test test test test test test test test test test test test test test
Test test test test test test test test test test test test test test
- Titre2
- Titre3
- Titre4
- ...

Pourriez-vous m'expliquer comment faire ?

Publicité

gatsu35

Blablaté par Harko

Tu peux te la jouer debutant et mettre les paragraphes avec style="display:none" et avec un id.
puis quand tu cliques tu passes le display à block

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function ShowHide(id) {
var elt = document.getElementById(id); if (!elt) return;
with(elt.style) {
display = (display=="none" ) ? "" : "none";
}
}
</script>
</head>
<body>
<a href="#" onclick="ShowHide('para1'); return false;">Parag1</a>
<p style="display:none" id="para1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel lacus sed sem rutrum lacinia. Vivamus malesuada nibh vel justo. In condimentum est at odio. Etiam sit amet elit non tortor rhoncus gravida. Nulla in est. Donec ultrices facilisis orci. Duis vel elit. Proin suscipit nisi ut dui. Nullam euismod eleifend neque. Vivamus fermentum sollicitudin metus. Praesent massa nisi, fringilla sit amet, feugiat ut, rutrum laoreet, nisi. Pellentesque porta sollicitudin arcu. Nam volutpat. Etiam scelerisque auctor ligula. Integer accumsan vehicula pede.</p>
</body>
</html>

Ou bien tu peux te la jouer gros warrior sans id (c'est mieux pour l'intégration derriere)

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function Expand(obj) {
if (!obj) return;
while(obj && !obj.className.match(/\bexpandbox\b/)) obj = obj.parentNode; //on remonte jusqu'au parent
if (!obj) return; //on sort si on a part trouvé d'obj parent
var aElt = obj.getElementsByTagName("*" ); //onrecupere tous les noeuds enfants
for (var i=0; i<aElt.length; i++) { //on parcours
if (aElt[i].className.match(/\bexpand\b/)) { //tous les noeuds avec une classe expand on les affichent ou on les cachent
with(aElt[i].style) display = (display=="none" ) ? "" : "none";
}
}
}
</script>
</head>
<body>
<div class="expandbox">
<a href="#" onclick="Expand(this); return false;">Parag1</a>
<p style="display:none" class="expand">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel lacus sed sem rutrum lacinia. Vivamus malesuada nibh vel justo. In condimentum est at odio. Etiam sit amet elit non tortor rhoncus gravida. Nulla in est. Donec ultrices facilisis orci. Duis vel elit. Proin suscipit nisi ut dui. Nullam euismod eleifend neque. Vivamus fermentum sollicitudin metus. Praesent massa nisi, fringilla sit amet, feugiat ut, rutrum laoreet, nisi. Pellentesque porta sollicitudin arcu. Nam volutpat. Etiam scelerisque auctor ligula. Integer accumsan vehicula pede.
</p>
</div>
</body>
</html>

Ou encore jouer avec les CSS et le JS en même temps (c'est largement plus rapide que de parcourir tout le block

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.expandbox .expand {display:none;}
</style>
<script type="text/javascript">
function Expand(obj) {
if (!obj) return;
while(obj && obj.className.indexOf("expandbox" )==-1) obj = obj.parentNode;
if (!obj) return;
var x=obj.className;
x = (x.match(/\bexpandbox\b/)) ? x.replace("expandbox","expandbox_opened" ) : x.replace("expandbox_opened","expandbox" );
obj.className=x;
}
</script>
</head>
<body>
<div class="expandbox">
<a href="#" onclick="Expand(this); return false;">Parag1</a>
<p class="expand">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vel lacus sed sem rutrum lacinia. Vivamus malesuada nibh vel justo. In condimentum est at odio. Etiam sit amet elit non tortor rhoncus gravida. Nulla in est. Donec ultrices facilisis orci. Duis vel elit. Proin suscipit nisi ut dui. Nullam euismod eleifend neque. Vivamus fermentum sollicitudin metus. Praesent massa nisi, fringilla sit amet, feugiat ut, rutrum laoreet, nisi. Pellentesque porta sollicitudin arcu. Nam volutpat. Etiam scelerisque auctor ligula. Integer accumsan vehicula pede.
</p>
</div>
</body>
</html>

Dans notre dernier cas on replace la classe par une autre classe qui n'a aucun effet (donc pas de display:none sur les blocks internes.

Message édité par gatsu35 le 26-08-2006 à 08:28:08

nero27

Merci pour tout : je vais tester tout ça rapidement :jap:

FORUM HardWare.fr

Programmation

HTML/CSS

Comment faire apparaitre un texte entre 2 lignes ?

Sujets relatifs
SELECT trop lent dans un fichier texte	tri fichier texte - VBS
Une regex pour tester une fin de ligne de texte	VBA EXCEL : détecter mise en forme texte (gras, italique)
Trier des données qui sont sur 2 lignes	scroll barre avec texte et image
Trouver la balise d'un texte que l'on cherche.	[RESOLU]Aligner Verticalement un texte en milieu de Cellule
VBA: Masquer des lignes d'un grand fichier Excel rapidement	[Résolu] Lire les 10 dernières lignes d'un fichier
Plus de sujets relatifs à : Comment faire apparaitre un texte entre 2 lignes ?

Page générée en 0.062 secondes