chiudere un div in automatico

Marco196943 · 2 Gen 2013

Salve e auguri a tutti, avrei bisogno di un aiutino: sto cercando di di creare una sorta di menu, che a seconda dela voce che chiamo mi apre un div.
Ma non riesco a far chiudere il div in automatico quando clicco sulla seconda voce; io sono arrivato fin qui.

Codice:

<script>
  $(document).ready(function () {
    $(".apri").click(function () {
		$("#contenitore").slideToggle("slow")
	});
});
  $(document).ready(function () {
    $(" .apri1").click(function () {
		$("#contenitore1").slideToggle("slow")
	});
});
  $(document).ready(function () {
    $(".apri2").click(function () {
		$("#contenitore2").slideToggle("slow")
	});
});

criric · 2 Gen 2013

Ciao,
potresti dare una classe a tutti i contenitori e prima di aprirne uno li chiudi tutti

Codice:

$(".apri").click(function () {
                $(".tutti").slideUp();
		$("#contenitore").slideToggle("slow")
	});

non ho testato

Marco196943 · 2 Gen 2013

grazie per la risposta

forse non mi sono espresso bene:
la mia intenzione e quella di reare una sorta di menu, con home forum ecc..
e al click apre un div, e quando clicco su un'altra voce di menu chiude il precedente e apre il nuovo

Nefyt · 2 Gen 2013

Marco196943 ha scritto:
forse non mi sono espresso bene:
la mia intenzione e quella di reare una sorta di menu, con home forum ecc..
e al click apre un div, e quando clicco su un'altra voce di menu chiude il precedente e apre il nuovo

Se ogni apertura contiene il div prova cosi

Codice:

  $(document).ready(function () {
    $(".apri").click(function () {
                $('#contenitore','.apri').slideUp();
		$('#contenitore',this).slideToggle("slow");
	});
});

criric · 2 Gen 2013

e al click apre un div, e quando clicco su un'altra voce di menu chiude il precedente e apre il nuovo

ma hai provato?
per chiuderli tutti intendevo cmq chiudere l'unico aperto, pero non sapendo qual'è quello aperto si fa prima a dare il comendo per chiuderli tutti

Marco196943 · 2 Gen 2013

Scusa ma non è che sono una cima ti posto il mio codice se non ti dispiace perchè io non riesco a farlo funzionare se hai pazienza io ti ringrazio

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
 $(document).ready(function () {
    $(".apri").click(function () {
                $('#contenitore','.apri').slideUp();
		$('#contenitore',this).slideToggle("slow");
	});
});
  </script>

  <style>
body{
margin: 0;
}

.apri{
	font-size:18px;
	font-family:Verdana, Geneva, sans-serif;
	float:left;
	list-style-type: none;
	margin-left: 30px;
	margin-top: 0px;
	color: #F00;
}

#pannello{
	background: #000;
	width: 400px;
	height: 50px;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#contenitore{
	width: 960px;
	height: 520px;
	text-align: center;
	display: none;
	background-color: #03C;
	margin-top: 20%;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 
 
  </style>
</head>
<body>
<div id="pannello">
  <ul>
    <li class="apri"> Clicca qui</li>
     <li class="apri"> Clicca qui1</li>
    <li class="apri"> Clicca qui2</li>
  </ul>
</div>
<div id="contenitore">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="contenitore">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="contenitore">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>



</body>
</html>

Nefyt · 2 Gen 2013

Cosi ti dovrebbe funzionare

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
 $(document).ready(function () {
    $(".apri").click(function () {
               var cl=$(this).index();
               $('.contenitore').slideUp();
               $('.contenitore').each(function(i){
                   if(i==cl) $(this).slideToggle('slow');
               });
	});
});
  </script>

  <style>
body{
margin: 0;
}

.apri{
	font-size:18px;
	font-family:Verdana, Geneva, sans-serif;
	float:left;
	list-style-type: none;
	margin-left: 30px;
	margin-top: 0px;
	color: #F00;
}

#pannello{
	background: #000;
	width: 400px;
	height: 50px;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.contenitore{
	width: 960px;
	height: 520px;
	text-align: center;
	display: none;
	background-color: #03C;
	margin-top: 20%;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 
 
  </style>
</head>
<body>
<div id="pannello">
  <ul>
    <li class="apri"> Clicca qui</li>
     <li class="apri"> Clicca qui1</li>
    <li class="apri"> Clicca qui2</li>
  </ul>
</div>
<div class="contenitore">1
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="contenitore">2
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="contenitore">3
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>



</body>
</html>

Marco196943 · 2 Gen 2013

Grazie!!!!!!!!

Dirti grazie è poco:beer:se un giorno saprò chi sei e ti incontrerò:quote:

Autore	Titolo	Forum	Risposte	Data
	[PHP] Chiudere sessione quando la pagina viene riaggiornata	PHP	4	5 Dic 2018
G	[PHP] Chiudere determinate finestre browser alla disconnessione	PHP	0	23 Nov 2018
C	Chiudere un app	Javascript	0	27 Apr 2016
G	Chiudere popunder	jQuery	0	19 Feb 2016
	Mettere immagine per chiudere popup	HTML e CSS	1	8 Mag 2013
A	PHP: come chiudere uno script dopo un certo periodo di tempo?	PHP	7	23 Nov 2012
C	Bottone Close per chiudere Iframe/Popup	Javascript	2	12 Feb 2012
D	Reindirizzare e chiudere pagina	HTML e CSS	0	4 Feb 2012
C	chiudere a tempo showmodaldialog	Javascript	1	23 Giu 2009
B	Ora però devo chiudere la tabella comparsa, come faccio?	HTML e CSS	3	7 Mar 2009
M	aprire file allegato e chiudere finestra	Classic ASP	2	7 Feb 2008
I	Chiudere una pagina asp in un determinato orario?	Classic ASP	0	9 Ago 2007
M	Chiudere una pagina web	Javascript	2	13 Giu 2007
	Chiudere i pop up	Javascript	3	24 Apr 2007
C	Chiudere una finestra popup dopo il submit	Javascript	3	24 Gen 2006
D	chiudere un popup	Javascript	6	9 Ott 2005
G	Codice per chiudere una finestra attiva	HTML e CSS	6	24 Dic 2004
U	chiudere e minimizzare una finestra	Javascript	0	29 Set 2004
K	aprire e chiudere la taskbar	Javascript	3	23 Set 2004
	SANS Top Twenty List: le venti falle di sicurezza da chiudere al più presto	Sicurezza e Virus	0	26 Mag 2003
E	Creare un testo trasparente dietro un div	HTML e CSS	5	13 Set 2023
F	Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni?	Javascript	0	23 Nov 2022
M	Accordion menu e posizione div	HTML e CSS	0	29 Ago 2022
P	jquery refresh div non funziona	Javascript	0	6 Feb 2022
P	refresh div + scrittura/lettura dal db	Javascript	1	29 Gen 2022
	div centrato alla pagina posto sopra ai contenuti	HTML e CSS	1	8 Gen 2022
M	Unire 2 funzioni per l'invio di un form e con l'apertura di un div	Javascript	0	11 Dic 2021
	Nascondere div di default	jQuery	2	9 Ago 2021
	modificare il contenitore di un div	Javascript	2	9 Gen 2021
	modificare il contenitore di un div	Javascript	1	9 Gen 2021
A	inserire variabile php colore in div html	PHP	2	26 Nov 2020
J	Far comparire e scomparire un div con un select	Javascript	1	23 Mag 2020
T	Far sparire dalla pagina div che saranno inseriti successivamente	jQuery	0	20 Mar 2020
E	Div che scompare con scroll jquery	Javascript	0	27 Feb 2020
G	Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna	HTML e CSS	5	16 Dic 2019
	Creazione di un div con php o js	PHP	9	21 Nov 2019
	Bootstrap alert: usare lo stesso div per due messaggi consecutivi	jQuery	1	1 Ago 2019
S	Visibilità div in PHP	PHP	1	3 Mag 2019
L	[Javascript]Scorrere div con frecce avanti-indietro	Javascript	0	20 Apr 2019
P	[Javascript] Aprire Link in Div e pagina Dinamica	Javascript	0	1 Apr 2019
	[HTML] problema con i div	HTML e CSS	10	30 Mar 2019
	[HTML] il div non si ottimizza	HTML e CSS	1	21 Mar 2019
	[PHP] Scrivere dati in un div specifico	PHP	3	13 Dic 2018
R	[PHP] [Javascript] Link a DIV id di un' altra pagina	PHP	4	2 Dic 2018
	[Javascript] onclick su piu div insieme	Javascript	1	17 Nov 2018
	ritornare al div precedente	jQuery	2	27 Ott 2018
L	[Javascript]Aprire div con click e chiuderlo con altro pulsante	Javascript	2	11 Ott 2018
V	[Javascript] Visualizzare o nascondere div figlio	Javascript	4	23 Set 2018
E	[HTML] Allineare foto a un tag DIV verticalmente	HTML e CSS	0	15 Set 2018
E	[HTML] Allineamento immagine agli angoli inferiori di un div	HTML e CSS	12	13 Set 2018

Cerca

Cerca

chiudere un div in automatico

Marco196943

Utente Attivo

criric

Super Moderatore

Marco196943

Utente Attivo

Nefyt

Utente Attivo

criric

Super Moderatore

Marco196943

Utente Attivo

Nefyt

Utente Attivo

Marco196943

Utente Attivo

Discussioni simili