March 16, 2012

Moving two div elements at once

Question by MySQL

Not sure if I’m being too clear with the title. Sorry, it’s late and I don’t think I have a cleared mind.

Anyway what I want this to do is..

  1. When the div(manager) is clicked, the div(managerp) appears.
  2. The div(manager) moves to the area the same time managerp moves there. Almost as though they move as one div element.
  3. On the next click managerp Fades out, and manager moves back to its original position.

I’m able to do all of that, but it won’t return to it’s original position. I am a novice when it comes to jQuery, so this is where I ask for your help.

EDIT: The div manager doesn’t seem to return to the old position. I’ve tried editing the css through jQuery to get it to, but it doesn’t seem to work.

HTML :

    <div id="manager">
        <span>&raquo;</span>
</div>
<div id="managerp" style="">

</div>

No, I can’t put managerp within manager, it doesn’t seem to position itself as good as it should.

jQuery :

            $(document).ready(function() {
            $("#manager").click(function() {
                $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                $("#managerp").toggle("slow", function() {
                    if ($("#managerp").is(':visible'))
                        $("span").html("&laquo;");
                    else 
                        $("span").html("&raquo;");
                });
            });
        });

This should help you get the picture of what it’s supposed to look like. (Sorry if I am giving way too much information)

One
Two

Thank you for your help. If you need me to be more specific as to what it should be doing, just ask.

This is how it looks when it doesn't return correctly.

Answer by Derek

How about this:

$(document).ready(function() {
        $("#manager").click(function() {
            $("#managerp").toggle("slow", function() {
                if($("#managerp").is(':visible')){
                    $("span").html("&laquo;");
                    $("#manager").css({'margin-left' : '0px', 'border-left' : '0'});
                }else{
                    $("span").html("&raquo;");
                    $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                }
            });
        });
});

You have to reset the margin to 0px.

Answer by Starx

Use multiple-selector on your code to manipulate multiple elements. Like this

 $("#manager, #managerp").css({
    'marginLeft' : '270px', 
    'borderLeft' : '0'
});
...

Please fill the form - I will response as fast as I can!