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

Post the rendered HTML, the PHP is irrelevant here. And it would be easier if you gave the div pairs a class instead of, or in addition to, an ID. — j08691, Oct 07 '14 at 20:40
it shows all of them at the same time if I use class, I want to display them individually when clicked on them. I posted the PHP because thats how I am creating my multiple "desk_box" DIVs — mario, Oct 07 '14 at 20:47
here is the new fiddle: hope this clarifies http://jsfiddle.net/7hajv118/ — mario, Oct 07 '14 at 20:56
check it @mario : http://jsfiddle.net/hiteshbhilai2010/arfLboy7/17/ — Hitesh, Oct 09 '14 at 18:14

score 2 · Accepted Answer · answered Oct 08 '14 at 05:45

2

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');
});

answered Oct 08 '14 at 05:45

Akash Sarawagi

207
1
5

wow thanks a lot I appreciate it your help it's working well! Do you mind explaining the 3rd line of the code where it starts with 'div.station_info:contains(this text replace) css etc etc. ? I dont understand whats happening there and why are you replacing ":" and "is" ? Also, How can I include when I reclick on the same station_info DIV it will close ? I have to refresh the page in order for it to dissapear. Also, how does the JQuery know which ID station_info is being clicked on to show? I just dont want to copy this and not understand whats happening. thanks again!! – mario Oct 08 '14 at 13:17
nice one @akash but why not just use toggle – Hitesh Oct 08 '14 at 20:18
ok. you are welcome. 'div' is written to find the div and '.station_info' filters div with particular class and 'contains' is used to check whether the found div contains the required text. I have used replace function because your text are different in different class. So matching is required – Akash Sarawagi Oct 09 '14 at 05:19
@AkashSarawagi : http://jsfiddle.net/hiteshbhilai2010/arfLboy7/10/ ... I did try using toggle – Hitesh Oct 09 '14 at 06:32
@mario : I dont understand why toggle is not working for you ?? please explain ... http://jsfiddle.net/hiteshbhilai2010/arfLboy7/10/ – Hitesh Oct 09 '14 at 06:33
@hitesh try using your toogle with multiple Div. not only one. – Akash Sarawagi Oct 09 '14 at 06:46
@AkashSarawagi : thanks akash , check here --> http://jsfiddle.net/hiteshbhilai2010/arfLboy7/17/ ... can you explain the problem , it seems to be working fine with me – Hitesh Oct 09 '14 at 07:35
awesome guys! thanks a lot its working just like I wanted! I appreciate both of your help! Still new with JQuery haha – mario Oct 10 '14 at 00:49

Sridhar Gudimela · Answer 2 · 2014-10-07T21:11:22.893

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>

thanks for the answer but it didn't work for me though! – mario Oct 08 '14 at 13:26 — mario, Oct 08 '14 at 13:26

Hitesh · Answer 3 · 2014-10-08T20:30:39.300

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.

hey I copied the exact code and instead of showing my desk_box DIVs it just prints all of their information in station_info. Do you think its better if I used one while loop instead and echo the two DIVs in it instead of doing them separately? thanks — mario, Oct 08 '14 at 13:06
you need both while loop `$coord_result` and `$station_result` are two different things — Hitesh, Oct 08 '14 at 20:16
no i am not hiding it. I am using this function : $(".desk_box").click( function() { $(".station_info").hide(); // to hide all the others. $("#station_info"+ $(this).attr('data') ).show(); }); — mario, Oct 08 '14 at 20:32
how can I toggle the same div to open/close each time it is clicked? Also, I can't upvote I dont have enough reputation :/ — mario, Oct 08 '14 at 20:32
hmmm may be I misunderstood your question -->`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.` --> i thought u r clicking station_div and want `station_div` to be hidden when it is clicked — Hitesh, Oct 08 '14 at 20:38
yes thats exactly it. When I click it will show, if I reclick again it will close. Both things happening for the same DIV — mario, Oct 08 '14 at 21:01
hmmm but you are clicking on `desk_box` not `station_info` , pls correct me if I am wrong — Hitesh, Oct 09 '14 at 06:30

Tony Chiboucas · Answer 4 · 2014-10-10T16:31:49.143

0

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

edited Oct 10 '14 at 16:31

answered Oct 07 '14 at 21:24

Tony Chiboucas

5,505
1
29
37

1

I think it is better to use `data` when it comes to custom attribute – Hitesh Oct 07 '14 at 21:41
why `data-station` just use `data` – Hitesh Oct 07 '14 at 21:48
hey it actually worked! both you and the last answer on this post works I just want to know which one is better and why? Also, 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. Thanks again!! – mario Oct 08 '14 at 13:26
@TonyChiboucas also, how come you don't include (document).ready(function) ?? I want to understand this a bit better. thanks – mario Oct 08 '14 at 13:35
@mario - ` 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` ---> check my answer – Hitesh Oct 08 '14 at 20:23
@mario : ` 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` --> he has not answered this question then why have you accepted it as correct answer ... on what basis ? – Hitesh Oct 08 '14 at 20:25
@hitesh I'm partial to self-documenting code, and code that is unlikely to require rewrite, so `data-station` is what I went with. Of course the `ID` being there, data would probably be sufficient. – Tony Chiboucas Oct 10 '14 at 16:19
@mario to be able to hide the station on the second click of desk_box, you'll have to record the state of desk_box, and use that to determine whether to hide or show the station. Answer Edited. – Tony Chiboucas Oct 10 '14 at 16:21
@mario - jQuery `(document).ready(fn(){ ... });` implementations are not necessary to answer your question, and I think most people prefer specific and concise answers to verbose and more general ones. There are already much better explanations of that jQuery feature than I could ever write. http://learn.jquery.com/using-jquery-core/document-ready/ – Tony Chiboucas Oct 29 '14 at 21:56

How can I use JQuery toggle for multile DIVs?

4 Answers4

One Station Always Up

Second Click on Same desk_box will hide the station

Make it a little pretty using "slow"