Как я могу сделать окно автоматически перемещаться вниз?

Question

URL: http://test.getfamo.us/buy-twitter-followers.html

Issue: Этот пост о выпадающих коробках, в настоящее время они фиксируются на месте. Я бы хотел, чтобы они находились прямо друг под другом, а затем, когда вы нажимаете кнопку «вверх», одна другая нажата. Как мне это сделать?

Установка: Каждая коробка является его собственным DIV (box1 до box6), и это в два диве (сверху и снизу (для соответствующей строки), это то внутри о DIV

. CSS: Это CSS я использовал:. http://test.getfamo.us/css/screen.css

Im довольно уверен там должен быть способ сделать это с меньшим количеством кода, а Но в любом случае Im больше беспокоятся о том, что так коробка ниже опускается вниз, когда окно расширяется. Код, о котором идет речь, находится в разделе «/ * О программе * /», поэтому, если вы его найдете, он должен появиться.

Большое спасибо за любую помощь! (развернуть кодировку в jquery, если это необходимо)

Answer 1

Вы думаете о чем-то вроде аккордеона? FIDDLE

HTML

<div id="accordion"> 
    <h3>1,000 Followers - $4.99</h3> 
    <div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Try us out now!</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24/7 Live Support</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Impress your followers</div> 
    <div><img src='http://www.clker.com/cliparts/b/a/L/8/a/Z/orange-cross-md.png' />Bulk Discount</div> 
    </div> 
    <h3>5,000 Followers, $12.99</h3> 
    <div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Live Support</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Get recognized now!</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Money back guartantee</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Great value</div> 
    </div> 
    <h3>25,000 Followers, $29.99</h3> 
    <div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Great for expanding business!</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Live Support</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Amazing Price</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Bulk Discount</div> 
    </div> 
    <h3>50,000 Followers, $49.99</h3> 
    <div> 
    <div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Lifetime support</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Bulk discount</div> 
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Be famous on twitter</div> 
    </div> 
</div>