如何在JavaScript中创建切换功能以在HTML中显示div？

Question

I am trying to create a "drop down" div. The idea is that when you press a button the display property of the div is changed to BLOCK. I have managed to get the div to display but i cannot get the div to "hide" once the user clicks the button once again. On button click, i am calling a javascript fucntion that will get the element id and change the property to BLOCK.

this is my html which is created by a while loop.

 <?php

                        $sql="SELECT * FROM planservers WHERE plans_id = $planID";
                        $retServerNames = mysql_query($sql);
                        $buttonId=0;

                        While($row1=mysql_fetch_array($retServerNames)){

                            $serverID = $row1['id'];
                            $serverName = $row1['servername'];

    /**************this is my button.*******************/
                        echo"<input type='button' id='$buttonId' class='btn' name='show' value='".$serverName."' onclick='javascript:showServer(".$buttonId.");'
                                style='width: 90%; margin: 1%; text-align:left;'>";

                            echo"<div id='$serverName' style='margin: 3%; display:none;'>";

                            echo"<table style='border:none;' cellspacing='10px'>

                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>Task</th>
                                                        <th>Status</th>
                                                        <th>Agent</th>
                                                        <th>Date Completed</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>";                              


                            $sql2="SELECT * FROM planservertasks WHERE plans_id =$planID and planservers_id=$serverID";



                            $reTasks = mysql_query($sql2);
                            $counter = 1;
                            while($row=mysql_fetch_array($reTasks)){

                                if($row['status'] == 0){

                                    $statusString = "Pending";
                                    $statColor = "<td id=".$row['id']." style='color:orange;font-weight: bold;'>";
                                }else{

                                    $statusString ="Completed";
                                    $statColor = "<td id=".$row['id']." style='color:green;font-weight: bold;'>";
                                    }




                                                echo"<tbody>
                                                    <tr>
                                                        <td>".$counter.".</td>
                                                        <td>".$row['taskname']."</td>
                                                        ".$statColor.$statusString."</td>
                                                        <td >".$row['completedby']."</td>
                                                        <td>".$row['completdate']."</td>
                                                        <td><input  type='button'  name='$serverName' value='Completed' onclick='javascript:completeTask(".$row['id'].");'></td>
                                                    </tr>
                                                </tbody>";
                                                $counter++;

                            }

                            echo"</table>";
                            echo"</div>";
                            $buttonId++;
                        }

                    ?>  

This is my javascript function.

 function showServer(buttonid)
        {   
            var servername = document.getElementById(buttonid).value;

            if(document.getElementById(servername).style.display = "none"){

                document.getElementById(servername).style.display = "block";


            }

        }

this is the collapsed view. this is the expanded view.

I need to be able to click the blue button with the server name again to collapse the div. I am not sure if i need to change my java function or my html. any suggestions will help.

Answer 1

Pretty self-explanatory

function showServer(buttonid)
        {   
            var servername = document.getElementById(buttonid).value;

            if(document.getElementById(servername).style.display == "none"){

                document.getElementById(servername).style.display = "block";


            }else { 

              document.getElementById(servername).style.display = "none"; }

        }

Answer 2

if(document.getElementById(servername).style.display = "none"){

   document.getElementById(servername).style.display = "block";

}else { 

    document.getElementById(servername).style.display = "none"; 

}

In this code, your if statement isn't comparing to 'none'. The way you have it written, would assign 'none'. It should be == 'none'.