Question

My goal is to expand the .sort width and show all content in the .sort-expand div. This is expanding to the right with the .sort expanding from 200px when “more” is clicked to 400px. And, when clicked again, to shrink.

    <div class="sort">
    <div class="mainimg"></div>
    <div class="infoarea">
        <h3>Main Name</h3>
        <p>Title of position</p>
        <p><span class="floatl">Tag01, Tag02</span><span class="floatr"><a href="#" class="show">more</a></span></p>
    </div>
    <div class="sort-expand">
        <div class="votes"></div>
        <div class="full-info"></div>
        <div class="other"></div>
    </div>
</div>

This also needs to push all the other .sort areas so it doesn’t overlap them. Any ideas? I will post what I’ve started with but having a hard time. Thanks so much.

Answer 1

You should be able to use jQuery’s .slideDown(). .slideDown() will push the other elements as it animates downwards and shows the content of the div. Call it on the div you want: $("#myDiv").slideDown() If you want it to shrink when clicked again, use .slideToggle()