slideToggle sliding margin after intended div

slideToggle sliding margin after intended div

      Hi,

I'm trying to slideToggle a div according to the code posted below. What happens is that the div I want to slide up and down actually jumps and the margin after the div slides. Am I thinking too complicated?

Thanks for your help...

$(document).ready(function () {
    $(".button").click(function () {
        $(this).parent().next("div").slideToggle();
       });
});


    <div class="section">
        <div class="bar">
            <a class="button">Users  <span class="arrow">&#9660</span></a>
        </div>
        <div class="drop_content"> <!-- This is the div I want to slideToggle -->
            <table>
                <tr>
                </tr>
                <tr>
                </tr>
            </table>
        </div>
    </div>


.section {
    margin: 0 auto 10px auto;
    width: 75vw;
}

.bar {
    height: 30px;
    background-image: url(/mypicture);
    background-repeat: repeat-x;
    border-radius: 3px;
    line-height: 30px;
    color: darkolivegreen;
    font-weight: bold;
    font-size: 18px;
    padding-left: 10px;
}

.drop_content {
    display: none;
    margin: 0 auto 20px auto; <!-- This bottom margin is what actually slides -->
    padding-top: 0;
    min-height: 200px;
    background: white;
    color: darkolivegreen;
    border: 1px solid lightgray;
    border-top: none;
    border-radius: 3px;
}