I have written this JavaScript code that is supposed to float the address div to the center when you click on the info panel using the "addressmoved" class.
Challenges
However, when I click on the trigger button, instead of the address div moving to the center, it goes down to the bottom of the following content, which is not the desired behavior. Additionally, when closing the info panel by clicking the trigger button again, the address div should return to its original position.
Query
How can I ensure that clicking the trigger button moves the address to the center as intended and returns it to the correct position when clicked again? JQuery
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$('.address').removeClass('address').addClass('addressmoved');
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
CSS
.addressmoved{
float:left;
right:0;
}
.address{
font-size: 18px;
height: 120px;
position: absolute;
right: 100px;
top: 50px;
width: 200px;
}
HTML
<div class="address">
<img src="image.png" alt="mainicon" />
<span>hello</br>
<em>world</em>
</span>
<ul>
<li class="icon">
<img class="social" src="icon1.png " alt="icon1"/>
</a>
</li>
</ul>
</div>