JQuery slideToggle, вызывающий пробел с встроенными блоками div

Question

У меня есть список городов, отображающих встроенные.

<div class="accordion-container"> 
    <a href="#" class="accordion-toggle">Rome</a> 
    <div class="accordion-content"> 
     <p>..</p> 
    </div> 
</div> 

При выборе заголовка города, используя функцию slideToggle, я показываю некоторую информацию об этом городе.

accordionContent.slideToggle(250); 

Но он также скользит вниз по городу рядом с ним, вызывая большую зону белого пространства. Есть ли способ только сдвинуть divs ниже выбранного div?

Вот jsfiddle

Answer 1

вы можете установить выравнивание по вертикали для top в вашем CSS, чтобы держать другой заголовок, где:

.accordion-container { 
    width: 49%; 
    margin: 0 0 20px; 
    clear: both; 
    display: inline-block; 
    vertical-align:top; 
} 

EXAMPLE 1

ИЛИ

Вы можете установить контент position: absolute, так что порывает это контейнер:

.accordion-content { 
    background: #FFF; 
    display: none; 
    padding: 20px; 
    overflow: auto; 
    position: absolute; 
    z-index: 2; 
} 

EXAMPLE 2

Answer 2

Не слишком уверен, как года хотят, чтобы она выглядела. Но простое исправление добавляет vertical-align: top;

.accordion-container { 
    width: 49%; 
    margin: 0 0 20px; 
    clear: both; 
    display: inline-block; 
    vertical-align: top; 
} 

Answer 3

Я думаю, что вы собираетесь иметь две отдельные колонки для этого, то:

.accordion-container { 
    margin: 0 0 20px; 
    display: block; 
} 
.column { 
    display: inline-block; 
    width: 49%; 
    vertical-align: top; 
} 

http://jsfiddle.net/cone06kr/10/

Вам нужно перенести содержимое, чтобы вернуть его в исходном порядке.

Если вы создаете этот контент, вам понадобятся две петли, одна для другой - для выравнивания.