Looking to animate two divs on the left side.
div1 - text content with float left
div2 - icons with float left
Upon clicking div1, it should move to the left along with the icons.
The blue boxes are moving from right to left while the "Follow us" text remains on the left side. My goal is to have the "Follow us" text on the right side and when clicked, it should move to the left just like the blue boxes.
HTML
<div id="footer">
<div class="socialtext">Follow us</div>
<div class="socailicons">
<div class="icon"> </div>
<div class="icon"> </div>
<div class="icon"> </div>
<div class="icon"> </div>
<div class="icon"> </div>
</div>
</div>
JS
$(document).ready(function() {
$('.socialtext').click(function () {
$('.socailicons').toggle("slide", {
direction: "right"
}, 1000);
});
});
CSS
#footer{
width: 300px;
border: 1px solid #FF0000;
height: 35px;
}
.socialtext{
width: 100px;
float:left;
}
.socailicons{
width: auto;
display:none;
float:left;
}
.icon{
width: 10px;
height: 10px;
background: none repeat scroll 0 0 #0769AD;
float:left;
margin: 10px;
}
I want the "Follow us" text to be on the right side of the box, and when clicked, it should slide to the left along with the icons. The icons are initially hidden and will only appear upon clicking the "Follow us" text.