Menu : Action derouler

Résolu

Clement-aviation Messages postés 101 Statut Membre -
Clement-aviation Messages postés 101 Statut Membre - 14 nov. 2009 à 00:02

Bonjour, je voudrais faire un titre et quand on clique sur ce titre je veux que la partie se développe ou tout simplement mettre un ligne pour faire une action derouler
je sais que je ne suis pas très clair donc pour vous donnez une odée de ce que je veux a peu pres, c'est faire comme dans wikipedia : https://fr.wikipedia.org/wiki/Aviation (la banniere "pour une wikipedia durable" en haut ou le "afficher-masquer" du sommaire) voila j'espere que vous avez compris ce que je veux =D

Merci, si vous répondez.

Configuration: Windows Vista
Firefox 3.1
Macromedia Dreamweaver MX 6
                 Flash MX 6
                 Fireworks MX 6

Afficher la suite

5 réponses

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

SALUT

Essaye au moins de comprendre les solutions que l on te donne !!! avant de demander que l on te le fasse !

puisque c est un getElementById , cela peux donc s appliquer a n importe quelle balises supportant une "id"

et tu n a qu a mettre un

style="display:none"

aux div a cacher!!

voila la meme chose que l exemple au dessus avec quelques modifs pour pouvoir mettre plusieurs "sub"

cache facilement !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>RAD ZONE Webcreation
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="http://radservebeer.free.fr" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <style type="text/css">
    /*<![CDATA[*/
    .subtitre{
      background-color:#FFFFCC;
      cursor:pointer;
      font-weight:bold
    }

    .texte{
      background-color:#898989;
      color:#CCFFFF
    }
    /*]]>*/
    </style>
<script type="text/javascript">
//<![CDATA[
//<!-- Begin
var subs_array = new Array("sub1","sub2","sub3");
function montrerSubs(la_sub){
        if (document.getElementById(la_sub).style.display==""){
        document.getElementById(la_sub).style.display = "none";return
  }
  for (i=0;i<subs_array.length;i++){
        var my_sub = document.getElementById(subs_array[i]);
        my_sub.style.display = "none";
        }
  document.getElementById(la_sub).style.display = "";
  }
//  End -->
//]]>
</script>
</head>
<body>
  <div>
    <div onclick="montrerSubs('sub1')" class="subtitre">TEXTE 1</div>
    <div id="sub1" class="texte" style="display:none">
      Lorem ipsum dolor sit amet consectetuer ligula et ut Vivamus nascetur. Et Vestibulum urna
      orci massa turpis Maecenas eros sem dolor tortor. Pede lobortis et tellus Integer enim
      Suspendisse feugiat wisi nulla vitae. Et semper sociis Donec In tortor Duis velit eget tortor
      pretium. Orci leo Vivamus aliquet dignissim volutpat felis turpis pharetra sed Pellentesque.
      Id Nullam hendrerit dui Maecenas nibh malesuada in nascetur venenatis urna. Quis Suspendisse
      id.
    </div>
      <br />
    <div onclick="montrerSubs('sub2')" class="subtitre">TEXTE 2</div>
     <div id="sub2" class="texte" style="display:none">
      Lorem ipsum dolor sit amet consectetuer aliquam sodales ligula pellentesque at. Lacus
      Curabitur Maecenas magnis Curabitur nibh et sed mauris Aenean consectetuer. At condimentum
      congue amet adipiscing diam aliquam at commodo Curabitur amet. Lorem ipsum Integer auctor
      platea condimentum ac Mauris id felis cursus. Congue id eget Curabitur tincidunt tristique ut
      fringilla libero Aenean.
    </div>
     <br />
  <div onclick="montrerSubs('sub3')" class="subtitre">TEXTE 3</div>
    <div id="sub3" class="texte" style="display:none">
      Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam
      ti del coalescent lingues.<br />
      Li nov lingua franca va esser plu simplic e regulari quam.
    </div>
  </div>
</body>
</html>

a+

mais fais un effort et n attend pas que l on fasse pour toi !!!

Atropa Messages postés 2051 Statut Membre 274

bonjour,
essaye ça :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	<script type="text/javascript" >
	<!--
		function afficher(idLink,id) {
			var item = document.getElementById(id);
			var link = document.getElementById(idLink);
			if(item.style.display == 'none') {
				item.style.display = 'block';
				link.innerHTML = '[Masquer]';
			}
			else {
				item.style.display = 'none';
				link.innerHTML = '[Afficher]';
			}
		}
	//-->
	</script>
</head>
<body>
	<div>
		<div>Menu <a id="link" href="javascript: afficher('link','a1');" >[Masquer]</a></div>
		<div id="a1">Ce que tu veux cacher ou afficher</div>
	</div>
</body>
</html>

c'est basique mais ca fonctionne

Réponse 3 / 5
Clement-aviation Messages postés 101 Statut Membre 1

Merci :) c'est vrai que c'est simple mais c'est a peu pres ca que je veux,
sauf que ce que je voudrais c'est que au debut ca soit masqué et apres quand on clique ca affiche alors que le code que tu m'a passé c'est affiché au début et tu masques apres
alors stp dis moi qu'est ce qui faut que je modifie pour pouvoir faire ce que je veux =D

Sinon, quelqu'un pourrait me mettre un code pour faire la mm chose mais en cliquant sur le titre et non sur un lien... je vais chercher de mon coté ;)

Merci quand mm Atropa =D
0
Réponse 4 / 5
Clement-aviation Messages postés 101 Statut Membre 1

ok merci j'ai compris ^^ j'ai cherché mais vite fait lol
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
Clement-aviation Messages postés 101 Statut Membre 1

je mais le topic en résolu pour l'instant je verrais si le code me convient ^^
0

Menu : Action derouler

5 réponses

Discussions similaires

Newsletters