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..
- When the div(manager) is clicked, the div(managerp) appears.
- The div(manager) moves to the area the same time managerp moves there. Almost as though they move as one div element.
- 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>»</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("«");
else
$("span").html("»");
});
});
});
This should help you get the picture of what it’s supposed to look like. (Sorry if I am giving way too much information)
Thank you for your help. If you need me to be more specific as to what it should be doing, just ask.
Answer by Derek
How about this:
$(document).ready(function() {
$("#manager").click(function() {
$("#managerp").toggle("slow", function() {
if($("#managerp").is(':visible')){
$("span").html("«");
$("#manager").css({'margin-left' : '0px', 'border-left' : '0'});
}else{
$("span").html("»");
$("#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'
});