Hoe kan ik deze jQuery laten werken zoals ik dat wil?

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

Wanneer je op de h2 klikt, schuift het de verdeling op en neer, maar hoe kan ik het zo maken dat het de verdieping verschuift en de andere secties eronder schuiven omhoog om onder de h2 te zitten, in plaats van dat de div omhoog schuift om op te zitten de h2 hieronder.

Moeilijk uit te leggen, maar controleer de viool,

 1
toegevoegd bewerkt
Bekeken: 3
de bron
ro ru fr es pt de hi bn ar kk tr uk
Bedoel je dat je wilt dat de h2 op dezelfde plaats blijft terwijl de div eronder schuift?
toegevoegd de auteur Tules, de bron
haha bedankt, ik zal even kijken
toegevoegd de auteur Tules, de bron
Ja, je hebt het veel beter uitgelegd.
toegevoegd de auteur cgweb87, de bron
Klinkt alsof u wilt dat de verticaal uitgelijnde inhoud meer op kolommen lijkt?
toegevoegd de auteur Surreal Dreams, de bron
Klinkt nog steeds niet logisch.
toegevoegd de auteur aziz punjani, de bron
dus je wilt dat de rijen eronder allemaal omhoog gaan? of blijven waar ze zijn?
toegevoegd de auteur Patricia, de bron

3 antwoord

Ik denk dat alles wat je moet doen om te krijgen wat je wilt is, toe te voegen: style = "vertical-align: top;" naar je dorpsklasse

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

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

4
toegevoegd
de bron
Dit deed de truc, bedankt :)
toegevoegd de auteur cgweb87, de bron
bedankt voor de viool Abe! Ik heb hem bewerkt om de theorie te testen, maar ben toen vergeten het te bewaren en te koppelen.
toegevoegd de auteur Patricia, de bron

Hier is een snelle wijziging in uw CSS:

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

Hiermee blijft de H2 op zijn plaats, de inhoud eronder wordt opgerold.

2
toegevoegd
de bron

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

dit werk voor jou?

1
toegevoegd
de bron
laat staan ​​dat deze jongens beter werk hebben geleverd dan ik!
toegevoegd de auteur Tules, de bron