CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
Aarron H
Aarron H

Reputation: 185

Jquery slideToggle causing white space with inline-block divs

I have a list of cities displaying inline. 

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

When selecting the header of a city, using the slideToggle, I display some info on that city. 

accordionContent.slideToggle(250);

But it also slide's down the city header next to it, causing a big white space area. Is there a way to only slide the divs below the selected div?

Here is a jsfiddle

Upvotes: 0

Views: 914

Answers (3)

stovroz
stovroz

Reputation: 7065

I think you're going to have to have two separate columns for this, then:

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

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

You'll need to shift the content about to get it back in your original order.

If you're generating this content you'll need two loops, one for odds the other for evens.

Upvotes: 2

Alan Dunning
Alan Dunning

Reputation: 1351

Not too sure how yo want it to look. But a simple fix is adding vertical-align: top;

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

Upvotes: 0

jmore009
jmore009

Reputation: 12923

you can set the vertical alignment to top in your CSS to keep the other header where it is:

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

EXAMPLE 1

OR

You could set the content to position: absolute so it breaks out of it's container:

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

EXAMPLE 2

Upvotes: 2

Related Questions