Question

I’m having some issues with my .toggle(), as I got a container and it got a div inside that is hidden. I have used .toggle() to show and hide it, but because of some reason the div always starts to show in the left corner and when it completely shown it’s possition itself centred

Here is a jsfiddle

HTML:

<a href="#" id="click_me">click me</a>
<div class="contain">
<div id="drop_down"></div>
</div>​

CSS:

#drop_down {
    height: 200px;
    width: 200px;
    background-color: #ccc;
    display: none;
    margin: 0 auto;
}

.contain {
    width: 100%;
    text-align;
}

JavaScript:

$('#click_me').on('click', function() {
    $('#drop_down').toggle('slow'); 
});​

Answer 1

change html like this

<a href="#" id="click_me">click me</a>
<div class="contain">
   <div class="content"><div id="drop_down"></div></div>
</div>​

and add this style

.content{
  margin: 0 auto;width:200px;  
 }

DEMO