Como posso fazer este jquery funcionar como eu quero?

Fiddle here: http://jsfiddle.net/cgweb87/r3NEX/

Quando você clica no h2, ele desliza o div para cima e para baixo, mas como posso fazê-lo para que ele deslize o div para cima e as outras seções abaixo deslize para cima para sentar sob o h2, em vez de o div deslizar para cima o h2 abaixo.

Difícil de explicar, mas por favor, verifique o violino,

1
Quer dizer que você quer que o h2 fique no mesmo lugar enquanto o div desliza para baixo?
adicionado o autor Tules, fonte
haha obrigado, vou dar uma olhada
adicionado o autor Tules, fonte
Sim, você explicou muito melhor.
adicionado o autor cgweb87, fonte
Parece que você quer que o conteúdo alinhado verticalmente atue mais como colunas?
adicionado o autor Surreal Dreams, fonte
Ainda não faz sentido.
adicionado o autor aziz punjani, fonte
então você quer que as linhas abaixo dele se movam para cima? ou ficar onde estão?
adicionado o autor Patricia, fonte

3 Respostas

Eu acho que tudo que você precisa fazer para conseguir o que quer é adicionar: style = "vertical-align: top;" para sua classe townSection

.townSection {width: 30%; display: inline-block; vertical-align:top;}

http://jsfiddle.net/r3NEX/13/

4
adicionado
Isso fez o truque obrigado :)
adicionado o autor cgweb87, fonte
obrigado pelo violino Abe! Eu editei o seu para testar a teoria, mas depois esqueci de salvá-lo e vinculá-lo.
adicionado o autor Patricia, fonte

Aqui está uma mudança rápida para o seu CSS:

.townSection {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

Com isso, o h2 permanece no lugar, o conteúdo sob ele se acumula.

2
adicionado

http://jsfiddle.net/r3NEX/12/

esse trabalho pra você?

1
adicionado
Não importa que esses caras tenham feito um trabalho melhor que eu!
adicionado o autor Tules, fonte