apertura e chiusura div

**maxcondor** · 28-02-2010, 01:34

con un semplice script jquery riesco a chiudere ed aprire un div.
Avrei però esigenza di inserire più div, ma non riesco ad integrare il codice.
come gestisco il div content2 e cosi via?

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 src="scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
      $(document).ready(function(){
	  
	  $('#content1').hide();
   
   			$('a').click(function(){
			
			$('#content1').show('slow');
   
   });
   
   $('a#close').click(function(){
   		$('#content1').hide('slow');
		})
   
 	  });
</script>
    
    <style>
	body{font-size:12px; font-family:"Trebuchet MS";}
	#content1{
	border:1px solid #CCCC33;
	padding:10px;
	margin-top:10px;
	width:500px;
	}
	</style>
    
</head>

<body>

Something Here
<div class="box">
<div id="content1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.


Close</p>
</div>
</div>
Something Here
<div class="box">
<div id="content2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.


Close</p>
</div>
</div>
</body>
</html>

**Senamion** · 01-03-2010, 10:46

Tieni conto che non puoi avere più elementi con lo stesso id, però una soluzione alternativa può essere qualcosa tipo:

codice:

<script type="text/javascript">
$(document).ready(function(){
  $('#content1, #content2').hide();
   
  $('a').click(function(){
    $(this).next().children().show('slow');
  });
   
   $('a#close').click(function(){
     $(this).parent().hide('slow');
   })
});
</script>

**maxcondor** · 01-03-2010, 12:02

Originariamente inviato da Senamion
Tieni conto che non puoi avere più elementi con lo stesso id, però una soluzione alternativa può essere qualcosa tipo:

codice:

<script type="text/javascript">
$(document).ready(function(){
  $('#content1, #content2').hide();
   
  $('a').click(function(){
    $(this).next().children().show('slow');
  });
   
   $('a#close').click(function(){
     $(this).parent().hide('slow');
   })
});
</script>

quindi posso inserire tutti i div che voglio?

codice:

 $('#content1, #content2,#content3,#content4....').hide();

Stasera provo e ti faccio sapere se funziona

**maxcondor** · 01-03-2010, 23:51

codice:

$(document).ready(function(){
  $('#content1, #content2, #content3, #content4, #content5, #content6, #content7').hide();
   
  $('a').click(function(){
    $(this).next().children().show('slow');
  });
   
   $('a#close').click(function(){
     $(this).parent().hide('slow');
   })
});

i div vengono nascosti all'apertura della pagina però non si aprono quando clicco!!!

**Senamion** · 02-03-2010, 10:41

La struttura del DOM è quella che hai indicato? Senno' posta la pagina.

**maxcondor** · 02-03-2010, 17:08

eccoti la struttura:

codice:

.....
<script type="text/javascript">
 
$(document).ready(function(){
  $('#content1, #content2, #content3, #content4, #content5, #content6').hide();
   
  $('a').click(function(){
    $(this).next().children().show('slow');
  });
   
   $('a#close').click(function(){
     $(this).parent().hide('slow');
   })
});

	  
</script>
....
<a href="#content1" id="click">Team1

     	</a>
        <div class="break"></div>
<div id="content1">
  

Ciao , 

  </p>
  

Close</p>
</div>
<a href="#content2" id="click">Team2

</a>
        <div class="break"></div>
<div id="content2">
  

Ciao, </p>
  

Close</p>
</div>
<a href="#content3" id="click">Team3

</a>
        <div class="break"></div>
<div id="content3">
  

Ciao, </p>
  

</p>
  

Close</p>
</div>
<a href="#content4" id="click1">Team4

</a>
        <div class="break"></div>
<div id="content4">
  

Ciao, </p>
  

</p>
  

Close</p>
</div>
<a href="#content5" id="click">Team5

        </a>
        <div class="break"></div>
<div id="content5">
  

Ciao, </p>
  

</p>
  

Close</p>
</div>
<a href="#content6" id="click">Team6

        </a>
        <div class="break"></div>
<div id="content6">
  

Ciao, </p>
  

</p>
  

Close</p>
</div>

**maxcondor** · 03-03-2010, 09:54

possibile che non si riesce a fare sta cosa???

**Senamion** · 03-03-2010, 14:56

Puoi sempre studiarti jQuery, no?

Visto che hai modificato la struttura del dom e io ti ho dato un esempio con la tua struttura originale puoi provare a ricavare quella della struttura che hai modificato.
Tanto se te la dico io e poi la cambi di nuovo saresti sempre nelle stesse condizioni.

**maxcondor** · 03-03-2010, 16:16

si hai ragione ho dovuto cambiare per esigenze la struttura della pagina.
Però secondo me il problema sta in
$(this).next().children().show('slow');

la chiusura dei div invece funziona modificando
$(this).parent().hide('slow');
in
$(this).parent().parent().hide('slow');

Discussione: apertura e chiusura div

Strumenti discussione

Ricerca discussione

Visualizza

apertura e chiusura div

Permessi di invio