Nascondere/mostrare div al click

[Roby140569]

Ciao a tutti,
ho un problema che non so come risolvere.

Ho una pagina con domande e risposte e con un javascript faccio in modo che il div contenente la risposta si apra al click.

Questo è il javascript

<script type="text/javascript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='-'){
document.getElementById('bt1').value = '+';
document.getElementById('bt1').className = 'btn btn-info mostra-nascondi';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value  = '-';
document.getElementById('bt1').className = 'btn btn-info mostra-nascondi';
document.getElementById(id).style.display = 'inline';
}
}
</script>

Questo è l'HTML

<li class="domanda">
<strong>Domanda?</strong>
<input type=button name=type id='bt1' value='+' onclick="setVisibility('sub1');" class="btn btn-info mostra-nascondi">
<br>
<div id="sub1" class="domanda_nascosta">Risposta.</div>
</li>

Questo il CSS

<style>
.domanda_nascosta{
    display:none;
}
</style>

La funzione setVisibility agisce sul div con id sub1.

Le domande sono tante e vengono lette, tramite ASP, da un database.
Avendo n domande e quindi n div, devo trovare il modo di far agire la funzione sui diversi div.

Per il momento ho adottato questa soluzione.

<ul class="list-unstyled domande">
<%
SqlString = "SELECT * FROM faq WHERE attiva='1' ORDER BY pos ASC"
SET RS = Conn.Execute(SqlString)
WHILE NOT RS.EOF
%>
<script type="text/javascript">
function setVisibility<%=RS("id")%>(id) {
if(document.getElementById('bt<%=RS("id")%>').value=='-'){
document.getElementById('bt<%=RS("id")%>').value = '+';
document.getElementById('bt<%=RS("id")%>').className = 'btn btn-info mostra-nascondi';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt<%=RS("id")%>').value  = '-';
document.getElementById('bt<%=RS("id")%>').className = 'btn btn-info mostra-nascondi';
document.getElementById(id).style.display = 'inline';
}
}
</script>
<li class="domanda">
<strong><%=RS("faq")%></strong>
<input type=button name=type id='bt<%=RS("id")%>' value='+' onclick="setVisibility<%=RS("id")%>('sub<%=RS("id")%>');" class="btn btn-info mostra-nascondi">
<br>
<div id="sub<%=RS("id")%>" class="domanda_nascosta"><%=Replace(RS("risposta"),chr(13)&chr(10),"<br />")%></div>
</li>
<%
RS.MoveNext
WEND
%>
</ul>
<%
RS.Close
Set RS = Nothing
%>

Praticamente creo una funzione setVisibility per ogni dato del recordset.

Mi chiedevo se ci fosse una soluzione migliore, visto che così, alla fine, se ho 10 domande, mi trovo nella pagina ripetuta per 10 volte la funzione setVisibility, con nomi setVisibility1, setVisibility2, ecc, con il numero corrispondente all'id del record scritto nel database.

[cavicchiandrea]

<ul class="list-unstyled domande">
<script type="text/javascript">
function setVisibility(id) {
if(document.getElementById('bt'+id).value=='-'){
document.getElementById('bt'+id).value = '+';
document.getElementById('bt'+id).className = 'btn btn-info mostra-nascondi';
document.getElementById('sub'+id).style.display = 'none';
}else{
document.getElementById('bt'+id).value  = '-';
document.getElementById('bt'+id).className = 'btn btn-info mostra-nascondi';
document.getElementById('sub'+id).style.display = 'inline';
}
}
</script>
<li class="domanda">
<strong><%=RS("faq")%></strong>
<%
SqlString = "SELECT * FROM faq WHERE attiva='1' ORDER BY pos ASC"
SET RS = Conn.Execute(SqlString)
WHILE NOT RS.EOF
%>
<input type="button" name="type" id="bt<%=RS("id")%>" value="+" onclick="setVisibility(<%=RS("id")%>);" class="btn btn-info mostra-nascondi">
<br>
<div id="sub<%=RS("id")%>" class="domanda_nascosta"><%=Replace(RS("risposta"),chr(13)&chr(10),"<br />")%></div>
</li>
<%
RS.MoveNext
WEND
%>
</ul>
<%
RS.Close
Set RS = Nothing
%>

Cosi dovrebbe andare bene:
A) Controlla className perché mi sembra che la riscrivi inutilmente
B) Puoi spostare lo script js dentro head

[Roby140569]

Grazie per la risposta, ma così com'è non va.

Innanzitutto, non mi è chiaro come faccia l'id inserito nel javascript a leggere l'id nel database.

Poi, visto che con la tua modifica, il nome della funzione resta setVisibility, non dovrei modificare anche l'onclick? Io avevo messo, in coda al nome della funzione, l'id estratto dal database, in modo da avere la funzione setVisibility1 (per esempio), che agisce sul div con id = sub1, la funzione setVisibility2 su div con id = sub2 e via dicendo.

<input type=button name=type id='bt<%=RS("id")%>' value='+' onclick="setVisibility<%=RS("id")%>('sub<%=RS("id")%>');" class="btn btn-info mostra-nascondi">

[cavicchiandrea]

Si onclick è cambiato passo id direttamente alla funzione che a sua volta la incateno agli oggetti bt+id e sub+id ricontrolla deve andare

[Roby140569]

Se metto la funzione nella head, come fa leggere gli id dal database?

[camionistaxcaso]

Non è la funzione javascript che legge gli id del database, gli stessi vengono passati alla funzione, quindi puoi anche metterla nell' head