<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 .