Mostra e nascondi <div>

[ferr]

Salve a tutti ho un problema che non riesco a spiegarmi.

Io ho questo codice: dove la funzione in javascript MostraNasconda mi permette di visualizzare e nascondere il testo alla premuta del bottone

<script type="text/javascript">
     var mostra=true;
     function MostraNascondi() {
         if (mostra)
              document.getElementById("lezioni").style.display="block";
         else
              document.getElementById("lezioni").style.display="none";
         mostra=!mostra;
     }
</script>

<?php
// Elenco degli esami
$query = "SELECT id, fullname FROM course";
$result = mysql_query($query, $con);
echo "Esami";
while($row=mysql_fetch_array($result))
{
      echo "<p>".$row['id']." ".$row['fullname'];
?>        

      <button type="submit" name="mostra" value="mostra" onclick="MostraNascondi();">Visualizza lezioni</button>

      <div id="lezioni" style="display:none;">
      <?php
            // Elenco delle lezioni per l'esame scelto
            $query1 = "SELECT name FROM lesson WHERE course=$row['id'];";
            $result1 = mysql_query($query1, $con);
            echo "Lezioni";
            while($row1=mysql_fetch_array($result1))
            {
                  echo $row1[0]."<br>";
             }
       ?>
       </div>
<?php
}        // chiusura while degli esami
?>

Alla fine ottengo una roba di questo genere:
esame1 visualizza lezioni
esame2 visualizza lezioni
esame3 visualizza lezioni

Il mio obiettivo è che per ogni esame, alla premuta del bottone corrispondente, venga visualizzato l'elenco delle lezioni di quel determinato esame.

La funzione javascript funziona ma il problema è che mi visualizza sempre le lezioni del primo esame seppur digito il bottone di un altro esame...

[lucavizzi]

Ciao Ferr,
Gli id all'interno del documento dovrebbero sempre essere univoci

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $('.switch').click(function(){
          $(this).next().slideToggle();
     });
});
</script>

<?php
// Elenco degli esami
$query = "SELECT id, fullname FROM course";
$result = mysql_query($query, $con);
echo "Esami";
while($row=mysql_fetch_array($result))
{
      echo "<p>".$row['id']." ".$row['fullname'];
?>        

      <button class="switch">Visualizza lezioni</button>

      <div class="lezioni" style="display:none;">
      <?php
            // Elenco delle lezioni per l'esame scelto
            $query1 = "SELECT name FROM lesson WHERE course=$row['id'];";
            $result1 = mysql_query($query1, $con);
            echo "Lezioni";
            while($row1=mysql_fetch_array($result1))
            {
                  echo $row1[0]."<br>";
             }
       ?>
       </div>
<?php
}        // chiusura while degli esami
?>

Luca

[cavicchiandrea]

<script type="text/javascript">
     function MostraNascondi(id) {
var sezLezioni = document.getElementsByClassName("lezioni")
        for (var i=0; i<sezLezioni.length; i++;){
              if(sezLezioni[i].id == "lezioni_"+id){
sezLezioni[i].style.display="block";
         else
              sezLezioni[i].style.display="none";
         }
}
     }
</script>

<?php
// Elenco degli esami
$query = "SELECT id, fullname FROM course";
$result = mysql_query($query, $con);
echo "Esami";
while($row=mysql_fetch_array($result))
{
      echo "<p>".$row['id']." ".$row['fullname'];
?>        

      <button type="button" name="mostra" value="mostra" onclick="MostraNascondi(<?php echo $row['id']; ?>);">Visualizza lezioni</button>

      <div id="lezioni_<?php echo $row['id']; ?>" class="lezioni" style="display:none;">
      <?php
            // Elenco delle lezioni per l'esame scelto
            $query1 = "SELECT name FROM lesson WHERE course=$row['id'];";
            $result1 = mysql_query($query1, $con);
            echo "Lezioni";
            while($row1=mysql_fetch_array($result1))
            {
                  echo $row1[0]."<br>";
             }
       ?>
       </div>
<?php
}        // chiusura while degli esami
?>

[ferr]

Ringrazio tanto tutte e due, però non mi funziona nessuna delle due opzioni

lucavizzi: possibile che mi dia un problema con ajax? E' sufficente ciò <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> per funzionare? Scusate la mia ignoranza ma non conosco ne ajax ne javascript

cavicchiandrea: mi piace molto la tua soluzione ma non capisco perchè non vada eppur mi sembra che la punteggiatura sia corretta...

[lucavizzi]

Quella è la libreria jQuery, andrebbe inclusa solo una volta nel documento, e dovrebbe essere sufficiente a far girare il mio script.
Hai messo la classe "switch" ai pulsanti e la classe "lezioni" in sostituzione all'omonimo id?
È importante anche che i div.lezioni siano subito dopo i pulsanti.switch senza nessun altro tag HTML in mezzo.

[cavicchiandrea]

cavicchiandrea: mi piace molto la tua soluzione ma non capisco perchè non vada eppur mi sembra che la punteggiatura sia corretta...

Da errori nella console o nella pagina?
L'hai ricopiato esattamente sia lo script che html?
Se non risolvi ricontrollando, metti il link alla pagina pubblica

[ferr]

Quella è la libreria jQuery, andrebbe inclusa solo una volta nel documento, e dovrebbe essere sufficiente a far girare il mio script.
Hai messo la classe "switch" ai pulsanti e la classe "lezioni" in sostituzione all'omonimo id?
È importante anche che i div.lezioni siano subito dopo i pulsanti.switch senza nessun altro tag HTML in mezzo.

<head>
     <meta charset="utf-8"/>    <!-- codifica dei caratteri -->
     <title>esami</title>
     <link href="style.css" rel="stylesheet" type="text/css"/>
    
      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     
      <script type="text/javascript">
            $(function(){
                 $('.switch').click(function(){
                    $(this).next().slideToggle();
                });
            });
       </script>
</head>

<?php
// Elenco degli esami
$query = "SELECT id, fullname FROM course;";
$result = mysql_query($query, $con);
echo "Esami";
while($row=mysql_fetch_array($result))
{
        echo $row['id']." ".$row['fullname'];
?>        

<button class="switch">Visualizza lezioni</button>

<div class="lezioni" style="display:none;">
<?php
          // Elenco delle lezioni dell'esame scelto
          $query1 = "SELECT name FROM url WHERE course=$row['id'];";
          $result1 = mysql_query($query1, $con);
          echo "Lezioni";
          while($row1=mysql_fetch_array($result1))
          {
                echo $row1[0];
          }
?>
</div>
                       
<?php
}

[ferr]

Da errori nella console o nella pagina?
L'hai ricopiato esattamente sia lo script che html?
Se non risolvi ricontrollando, metti il link alla pagina pubblica

Ne in una ne nell'altra mi da errore...semplicemente quando spingo sul bottone 'visualizza lezioni' non accade niente

    <head>
        <meta charset="utf-8"/>
        <title>esami</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        
        <script type="text/javascript">             
              function MostraNascondi(id) {
                    var sezLezioni = document.getElementsByClassName("lezioni")
                     for (var i=0; i<sezLezioni.length; i++;){
                            if(sezLezioni[i].id == "lezioni_"+id){
                                   sezLezioni[i].style.display="block";
                             else
                                   sezLezioni[i].style.display="none";
                             }
                      }
                }
          </script>
    </head>

<body>
    <div id="container">

         <div id="header"> 
               .....
         </div>
            
         <div id="sidebar">
              ....
         </div>


         <div id="content">
                <?php
                // connessione            

                // login utente
                
                // Elenco degli esame a cui lo studente è iscritto
                $query = "SELECT id, fullname FROM course;";
                $result = mysql_query($query, $con);
                echo "Esami";
                while($row=mysql_fetch_array($result))
                {
                      echo "$row['id']." ".$row['fullname'];
                 ?>        


              <button type="button" name="mostra" value="mostra" onclick="MostraNascondi(<?php echo $row['id']; ?>);">Visualizza lezioni</button>

                      <div id="lezioni_<?php echo $row['id']; ?>" class="lezioni" style="display:none;">
                 <?php
                            // Elenco delle videolezioni dell'esame scelto
                            $query1 = "SELECT name FROM url WHERE course=$row['id'];";
                            $result1 = mysql_query($query1, $con);
                            echo "Lezioni";
                            while($row1=mysql_fetch_array($result1))
                            {
                                  echo $row1[0];
                             }
                   ?>
                      </div>
                    
          </div>
     </div>
</body>

[cavicchiandrea]

Metti degli alert nella funzione per capire cosa riceve è come lavora e posta il link alla pagina online

[lucavizzi]

<head>
     <meta charset="utf-8"/>    <!-- codifica dei caratteri -->
     <title>esami</title>
     <link href="style.css" rel="stylesheet" type="text/css"/>
    
      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     
      <script type="text/javascript">
            $(function(){
                 $('.switch').click(function(){
                    $(this).next().slideToggle();
                });
            });
       </script>
</head>

<?php
// Elenco degli esami
$query = "SELECT id, fullname FROM course;";
$result = mysql_query($query, $con);
echo "Esami";
while($row=mysql_fetch_array($result))
{
        echo $row['id']." ".$row['fullname'];
?>        

<button class="switch">Visualizza lezioni</button>

<div class="lezioni" style="display:none;">
<?php
          // Elenco delle lezioni dell'esame scelto
          $query1 = "SELECT name FROM url WHERE course=$row['id'];";
          $result1 = mysql_query($query1, $con);
          echo "Lezioni";
          while($row1=mysql_fetch_array($result1))
          {
                echo $row1[0];
          }
?>
</div>
                       
<?php
}

E' tutto giusto, se lo stai testando in locale aggiungi "http:" quando includi la libreria jQuery

<script src="http://ajax.googleapis.com/ajax/libs...n.js"></script>