How to create a toggle function in JavaScript to display a div in HTML?

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.

you are not using a comparator in your if statement, you had me fooled ;-) check my answer but I don't think you'll need to — Luke Kot-Zaniewski
– Luke Kot-Zaniewski, Commented Oct 12, 2016 at 20:21

Luke Kot-Zaniewski · Accepted Answer · 2016-10-12 20:20:18Z

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"; }

        }

edited Oct 12, 2016 at 20:20

answered Oct 12, 2016 at 20:18

Luke Kot-Zaniewski

1,16111 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vhdz04 Over a year ago

i apologize,, the code i provided was not the updated code. My current function looks exactly like yours. i will update my question with the proper code.

Luke Kot-Zaniewski Over a year ago

you need == for comparison. If this is indeed your issue I would suggest removing this question because of how trivial the bug was.

vhdz04 Over a year ago

thank you Lucas, you were right. unfortunatley i cant delete questions yet, but i will flag it for moderator attention.

Dave Cousineau · Accepted Answer · 2016-11-19 05:47:56Z

0

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

edited Nov 19, 2016 at 5:47

Dave Cousineau

13.4k8 gold badges70 silver badges83 bronze badges

answered Oct 12, 2016 at 20:24

user1289451

9219 silver badges22 bronze badges

6 Comments

Luke Kot-Zaniewski Over a year ago

how is this different from my answer?

user1289451 Over a year ago

I suppose it's not. I don't recall seeing your answer when I answered. I may have been typing mine while yours was posted. My apologies.

Luke Kot-Zaniewski Over a year ago

just edit it and I'll remove the downvote, didn't realize it was a mistake.

user1289451 Over a year ago

Edited. Thank you.

Dave Cousineau Over a year ago

@LucasKot-Zaniewski unless he literally ripped off your answer, answering similarly to you in close time proximity is not an issue

|

Collectives™ on Stack Overflow

How to create a toggle function in JavaScript to display a div in HTML?

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related