Comment faire apparaitre un texte entre 2 lignes ?

Marsh Posté le 26-08-2006 à 00:17:29

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 ?

Reply

Marsh Posté le 26-08-2006 à 00:17:29

Reply

Marsh Posté le 26-08-2006 à 08:16:54

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

Reply

Marsh Posté le 28-08-2006 à 10:27:24

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

Reply

Comment faire apparaitre un texte entre 2 lignes ?

Sujets relatifs:

Leave a Replay