Bottone che mostra e nasconde!

**E.C.Storie** · 02-10-2011, 15:10

Ragazzi vorrei sapere come crear eun bottone che mostri e nascondi un div con un effetto slide. Ripeto un solo bottone per tutti e due gli eventi ( chiusura e apertura ).

Grazie in anticipo!

**cavicchiandrea** · 02-10-2011, 16:10

Fino adesso cosa hai prodotto dove ti blocchi?
Posta il codice e html della pagina (no php o asp)

**E.C.Storie** · 02-10-2011, 16:17

ho trovato questo che usa jquery ma come puoi vedere usa due bottoni

http://demo.studio-88.it/slide/

**cavicchiandrea** · 02-10-2011, 16:34

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $("#tasto").bind('click',
				function(){
					if($("#tasto").val()=='apri'){
					$("#box").slideDown()
					$("#tasto").val('chiudi');
					}else{
					$("#box").slideUp();
					$("#tasto").val('apri');
					}
				});
                
            });
</script>
</head>

<body>
<div id="box" style="display:none; height:300px;">Testo di prova</div>
<input type="button" value="apri" id="tasto" />
            
</body>
</html>

**E.C.Storie** · 02-10-2011, 17:34

E se sono piu di un div? ç_ç

**E.C.Storie** · 03-10-2011, 11:18

up

**E.C.Storie** · 03-10-2011, 20:25

up

**lucavizzi** · 03-10-2011, 22:47

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $('input[id^="tasto"]').bind('click',
				function(){
      				var boxid=this.id.replace('tasto','box');
					if(this.value=='apri'){
					$("#"+boxid).slideDown()
					this.value='chiudi';
					}else{
					$("#"+boxid).slideUp();
					this.value='apri';
					}
				});
                
            });
</script>
</head>

<body>
<div id="box1" style="display:none; height:300px;">Testo di prova</div>
<input type="button" value="apri" id="tasto1" />

<div id="box2" style="display:none; height:300px;">Testo di prova</div>
<input type="button" value="apri" id="tasto2" />

            
</body>
</html>

puoi aggiungere box a piacere, basta che il box abbia come id box+numero e il pulsante tasto+stessonumero.

Discussione: Bottone che mostra e nasconde!

Strumenti discussione

Ricerca discussione

Visualizza

Bottone che mostra e nasconde!

Permessi di invio