Javascript: Créer un menu accordéon ou pliable

Author:

Javascript: Créer un menu accordéon ou pliable
Download

<html><head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 
.label { background-color: #003; width: 400px; border-right: 1px solid #fff;
         padding: 10px; margin: 0 20px; color: #fff; text-align: center;
         border-bottom: 1px solid #fff;}
.label a { color: #fff }
.elements { background-color: #CCD9FF; margin: 0 20px; padding: 10px;
            width: 400px; display: none}
</style>
 
 
  <script language="javascript">
 
window.onload=setup;
 
function setup(  ) {
   document.getElementById('one').style.display='none';
   document.getElementById('two').style.display='none';
}
 
function show(newItem) {
   var item = document.getElementById(newItem);
   if (item.style.display=='none') {
       item.style.display='block';
   } else {
       item.style.display='none';
   }
}
 
 
     </script> 
 
</head>
<body>
 
<form action="GET">
<div class="label" onclick="show('one')">
<a href="#name" onclick="return false">Nom</a>
</div>
<div class="elements" id="one">
<label>Nom de Famille:</label><br /><input type="text" name="firstname" /><br /><br />
<label>Prénom:</label><br /><input type="text" name="lastname" /><br /><br />
</div>
<div class="label" onclick="show('two')">
<a href="#address" onclick="return false">Adresse</a>
</div>
<div class="elements" id="two">
<label>Rue:</label><br /><input type="text" name="street" /><br /><br />
<label>Ville:</label><br /><input type="text" name="city" /><br /><br />
<label>Code Postal:</label><br /><input type="text" name="zip" /><br /><br />
<label>Pays:</label><br /><input type="text" name="state" /><br /><br />
</div>
</form>
 
 
 </body>
</html>

Cet article Javascript: Créer un menu accordéon ou pliable est apparu en premier sur .

Categories: Uncategorized