Togliere effetto fisarmonica

[Shyson]

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ù

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

 

[criric]

togli questo

$("#lista li ul").slideUp();

serve per chiudere tutti i menu aperti

 

[Shyson]

togli questo

$("#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

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

io farei cosi

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

io farei cosi

<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

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