Question

I am trying to accomplish what may be a simple task for you. I want it so everytime the user clicks one of the “patients” on the left hand bar, a drawer opens. That drawer will be loaded in a hidden div (display:none) on the page. Each div’s id will be the last lastname of the patient. My included fiddle shows all of the same last name for demonstration purposes only, obviously.

But the problem is I don’t know how to open a unique drawer for each patient. I guess I need to put a toggle on each patient’s li somehow?

Also, if they click another patient in the listing, I would like the current open drawer to close, and open the one they just clicked. Also, if the close button is clicked, obviously close the drawer as well.

I got a single drawer to work with this:

 $(".patient").toggle(function(){
            $(this)
                $('#drawer').slideDown("slow")

            }, function(){
                $(this)
                $('#drawer').slideUp("slow")    

            });

But obviously that isn’t going to work… 🙁

In the fiddle it is opening a standard “drawer” right now. but really I’d like the data for each named div be loaded in the same form. Please comment if you don’t understand.

Here’s the fiddle:

http://jsfiddle.net/3veht/1/

Answer 1

Add a data element to your HTML indicating an ID, let’s say patient ID in this case:

<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>

Then in your javascript when you load the data, you can use that ID to generate a page request. I also changed the toggle to a click and slid the previous one up before sliding the new one down. In the fiddle example:

 $(".patient").click(function(){
     var pat = $(this);
     if ($("#drawer").is(":visible"))
         $("#drawer").slideUp("fast", function () {

            $('#drawer').slideDown("slow")
            $("#drawer").load("/echo/js?js=" + pat.data("patientid"));       
         });
     else   
     {
         $('#drawer').slideDown("slow")
         $("#drawer").load("/echo/js?js=" + pat.data("patientid"));
     }
 });

Updated fiddle: http://jsfiddle.net/3veht/6/