Togliere effetto fisarmonica

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Devo fare in modo che quando si clicca sa CATEGORIA il menu deve rimanere aperto, non deve creare l’effetto fisarmonica (cioè chiudere l’altro), avevo trovato dei bei esempi su w3school.com ma non li trovo più

PHP:
<style type="text/css">
li span{
color: #004080;
cursor:pointer;
}
.subcat {
color: red;
display:none;
}
<style>

CATEGORIA 1

Nome 1
Nome 1
Nome 1
Nome 1

CATEGORIA 2

Nome 2
Nome 2
Nome 2
Nome 2

<script>
$(“#lista span.cat”).click(function(){

$(“#lista li ul”).slideUp();

if($(“#cat_” + $(this).attr(“id”)).css(‘display’) == ‘none’)
$(“#cat_” + $(this).attr(“id”)).slideDown();

})
</script>
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
togli questo
Codice:
$("#lista li ul").slideUp();
serve per chiudere tutti i menu aperti
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
togli questo
Codice:
$("#lista li ul").slideUp();
serve per chiudere tutti i menu aperti
Riposto il codice perché ho fatto dei cambiamenti:

1. devo mettere hover sul flip
2. quando apro una domanda deve aprirsi con la risposta e rimanere aperta anche se clicc o sulle altre domande, deve chiudersi solo se ci riclicco sopra

PHP:
<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css">
.flip {
	font-size: 1em; color: #004080;
    font-weight: bold; 
	text-align:left;
	padding-bottom: 5px;
	cursor:pointer;
}

.panel {
	font-size: 1em;
	padding-bottom:30px;
	display:none;
}
</style>

<div class="flip">&bull;&nbsp;DOMANDA1</div>

<div class="panel">RISPOSTA1</div>

<div class="flip">&bull;&nbsp;DOMANDA2</div>

<div class="panel">RISPOSTA2</div>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
io farei cosi
HTML:
<script>
            $(document).ready(function() {
                $(".flip").click(function(){
                    var id = $(this).attr("id");
                
                    if($("#r" + id).css("display") == "none")
                        $("#r" + id).slideDown("slow");
                    else
                        $("#r" + id).slideUp("slow");
                });
            });
        </script>


        <div id="1" class="flip">&bull;&nbsp;DOMANDA1</div>

        <div id="r1" class="panel">RISPOSTA1</div>

        <div id="2" class="flip">&bull;&nbsp;DOMANDA2</div>

        <div id="r2" class="panel">RISPOSTA2</div>
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
io farei cosi
HTML:
<script>
            $(document).ready(function() {
                $(".flip").click(function(){
                    var id = $(this).attr("id");
                
                    if($("#r" + id).css("display") == "none")
                        $("#r" + id).slideDown("slow");
                    else
                        $("#r" + id).slideUp("slow");
                });
            });
        </script>


        <div id="1" class="flip">&bull;&nbsp;DOMANDA1</div>

        <div id="r1" class="panel">RISPOSTA1</div>

        <div id="2" class="flip">&bull;&nbsp;DOMANDA2</div>

        <div id="r2" class="panel">RISPOSTA2</div>

Bene, io ho preparato un css ma da come hai impostato il codice non riesco a fargli prendere hover

PHP:
.flip {  
	font-size: 1em; color: #004080;
    font-weight: bold; 
	text-align: left;
    line-height: 25px; 
	cursor: pointer;
}

a.flip:visited {
	color: #004080;
}

a.flip:hover {
	color: #ff0000;
}
...

 <div id="1" class="flip">&bull;&nbsp;DOMANDA1</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
S [HTML] Effetto su testo da togliere HTML e CSS 0
S come togliere un post dai risultati di google? Supporto Mr.Webmaster 5
I [Woocommerce][E-commerce] Come togliere la sezione iva nella fatture E-Commerce 1
R [Javascript] Togliere Campi obbligatori Javascript 7
G [PHP] togliere sotto directory dall'url PHP 0
Shyson jQuery, togliere css hover jQuery 1
P [VBulletin] lasciare i titoli e togliere la sottolineatura CMS (Content Management System) 0
P Togliere la scritta "piace a.." da facebook HTML e CSS 2
ivarello Togliere una Funzione jQuery 4
asevenx carattere speciale da togliere in script galleria jquary jQuery 4
F Dalla mia Home Page vorrei togliere il plugins QuickTime per ascoltare la musica HTML e CSS 1
Shyson Togliere scritta in watermark Webdesign e Grafica 0
Shyson Togliere un codice a video PHP 12
F togliere modulo menù Joomla 4
F Come togliere il tasto play da una faccia Photoshop 6
A Togliere suggerimenti nei campi di testo HTML e CSS 0
S togliere "pubblicita" ad una scritta HTML e CSS 5
D Non riesco a togliere un cavallo di troia dal mio sito Sicurezza e Virus 0
G Tasto per togliere tasto di scelta rapida Excel Windows e Software 0
S Togliere il banner di Tripod.. Javascript 3
metalgemini Togliere notifiche di EasyPhp PHP 2
G Vorrei togliere il forum dal mio sito Supporto Mr.Webmaster 1
S Togliere rempimento ad immagini HTML e CSS 3
E Togliere la pubblicità di lycos... Hosting 2
G Eliminare l'effetto refresh di una pagina internet PHP 8
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [HTML] Effetto hover in un div HTML e CSS 6

Discussioni simili