How can I use JQuery toggle for multile DIVs?

Question

UPDATED CODE

I have my code posted and Fiddle : http://jsfiddle.net/02kcmzzn/

I updated my code thanks to some of your help, I appreciate it a lot. I want to know how can I close the station_info div when it is being clicked again because it disapears if I refresh the page only.

CSS:

body {
    margin:0px auto;
    width:80%;
    height:80%;
}
#map_size {
    width:1190px;
    height:1300px;
    background:#0099FF;
    border-style: solid;
    border-color: black;
    position: relative;
}
#desk_box {
    width: 23px;
    height: 10px;
    border: 4px solid black;
    padding:10px;
}
#station_info {
    display: none;
    width:150px;
    height:150px;
    border:4px solid black;
    background-color:white;
}

JS:

<script type="text/javascript">

  /* these two functions below WORK, I want to understand why would I use one over the other?
      and how do I close the station_info DIV when I reclick on it?*/
    $(".desk_box").click( function() {
    $(".station_info").hide();   // to hide all the others.
    $("#station_info"+ $(this).attr('data-station') ).show();
      });

     
              $(".desk_box").click(function () {
    $(".station_info").css('display','none');
$('div.station_info:contains("'+ ($(this).text()).replace(":", " is:")+'")').css ('display','block');
                    });

</script>

PHP

    while($row = mysqli_fetch_assoc($coord_result)){    
        //naming X,Y values
        $id    = $row['coordinate_id'];
            $x_pos = $row['x_coord'];
        $y_pos = $row['y_coord'];

        //draw a box with a DIV at its X,Y coord     
        echo "<div class='desk_box' data='".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
            echo "<div class='station_info' id='station_info".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
                    
                
                }//end while loop

Answer 1

One Station Always Up

The easiest solution will to use your existing ID (id:84) in a custom attribute of the desk_box and the id of the station_info:

 <div class='desk_box' data-station='84'>id:84</div>
 <div class='station_info' id='station_info84'>id:84</div>

Then, a little jQuery similar to the other answers should prove no trouble at all:

 $(".desk_box").click( function() {
   $(".station_info").hide();   // to hide all the others.
   $("#station_info"+ $(this).attr('data-station') ).show();
 });

Second Click on Same desk_box will hide the station

 $(".desk_box").click( function() {
   $(".station_info").hide();   // to hide all the others.
   $("#station_info"+ $(this).attr('data-station') ).toggle();
 });

Make it a little pretty using "slow"

 $("#station_info"+ $(this).attr('data-station') ).show("slow");

OR

 $("#station_info"+ $(this).attr('data-station') ).toggle("slow");

Answer 2

I am just editing your code for your better understanding

CSS:

/*body*/
 body {
 margin:0px auto;
 width:80%;
 height:80%;
}
/*map size*/
 #map_size {
 width:1190px;
 height:1300px;
 background:#0099FF;
 border-style: solid;
 border-color: black;
 position: relative;
}
/* desk boxes*/
 .desk_box {
 width: 23px;
 height: 10px;
 border: 4px solid black;
 padding:10px;
}
/*station info*/
 .station_info {
 display: none;
 width:150px;
 height:150px;
 border:4px solid black;
 background-color:white;
}

#desk_box:hover ~ .station_info {
display: block;
}

HTML:

<script type="text/javascript">
            $(document).ready(function () {
              $(".desk_box").click(function () {
                $id = $(this).attr("data")
                $("#station_info_"+$id).toggle();
              });

             /* based on your question -->"how can I include in the function where reclicked on the station_info DIV it will close? I have to refresh the page in order to do so" -->

adding this jquery */ $(".station_info").click(function () { $(".station_info").hide() }); });

PHP:

<?php


            //get number of rows for X,Y coords in the table
            while($row = mysqli_fetch_assoc($coord_result)){    
                        //naming X,Y values
                    $id    = $row['coordinate_id'];
                        $x_pos = $row['x_coord'];
                        $y_pos = $row['y_coord'];

                    //draw a box with a DIV at its X,Y coord     
            echo "<div class ='desk_box' data = ".$id."  id='desk_box_".$id."'style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
                } //end while coord_result loop

                while($row = mysqli_fetch_assoc($station_result)){
                        $id_cor    = $row['coordinate_id'];
                        $x_pos    = $row['x_coord'];
                        $y_pos    = $row['y_coord'];
                    $sec_name = $row['section_name'];

                    echo "<div id='station_info_".$id_cor."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id_cor."</br>Section:".$sec_name."</br></div>";
                    }
                ?>

check the JSfiddle to understand what I am trying to do http://jsfiddle.net/hiteshbhilai2010/arfLboy7/10/

while creating div I am trying to make some reference between clicking div desk_boxand station_div to make toggle.

Answer 3

I have tested it. its working.

Please remove Hover in css

.desk_box:hover ~ .station_info {
    display: block;
}

than replace you jquery click event with below one. This will show only clicked div info.

$(".desk_box").click(function () {
    $(".station_info").css('display','none');
    $('div.station_info:contains("'+ ($(this).text()).replace(":", " is:")+'")').css('display','block');
});

Answer 4

Instead of having your classes as #desk_box and #station_info which are being recognized by specific object ids, define them as class names as .desk_box and .station_info. And change your javascript part as follows...

<script type="text/javascript">
                $(document).ready(function () {
                $(".desk_box").click(function () {
                     myIdNbr = $(this).attr('id');//Getting the active desk_box id
                     myIdNbr  = myIdNbr .substr(myIdNbr.lastIndexOf('_')+1);//Triming the id to get last nbr
                    $("#station_info_"+myIdNbr).toggle();//append the last nbr from Id to toggle appropriate station_info
                });
                });
        </script>