Using Jquery slideToggle is creating additional spacing between inline-block divs

Question

Using Jquery slideToggle is creating additional spacing between inline-block divs

I am struggling with displaying a list of cities in an inline format.

<div class="accordion-container">
        <a href="#" class="accordion-toggle">London</a>
        <div class="accordion-content">
            <p>Information about London</p>
        </div>
    </div>

When I click on a city header, I want to use slideToggle to show more information about that city.

accordionContent.slideToggle(250);

However, when I do this, it also slides down the city header next to it, creating a large white space area. Is there a way to only slide the divs below the selected city?

Here is a jsfiddle with my code.

javascript jquery html css slidetoggle

Answer 1

Answer №1

To maintain the position of the other header, you can adjust the vertical alignment to top in your CSS:

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

Check out EXAMPLE 1 for reference.

Alternatively,

If you prefer, you can use position: absolute for the content to break out of its container:

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

Take a look at EXAMPLE 2 for an illustration.

Answer 2

To maintain the position of the other header, you can adjust the vertical alignment to top in your CSS:

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

Check out EXAMPLE 1 for reference.

Alternatively,

If you prefer, you can use position: absolute for the content to break out of its container:

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

Take a look at EXAMPLE 2 for an illustration.

Answer 3

Answer №2

To achieve the desired layout, it seems like you will have to create two separate columns:

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

http://jsfiddle.net/example123/15/

You may need to rearrange the content to maintain the original order.

If you are programmatically generating this content, you will likely require two loops—one for odd items and another for even items.

Answer 4

To achieve the desired layout, it seems like you will have to create two separate columns:

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

http://jsfiddle.net/example123/15/

You may need to rearrange the content to maintain the original order.

If you are programmatically generating this content, you will likely require two loops—one for odd items and another for even items.

Answer 5

Answer №3

I'm not entirely certain about the desired appearance, but one easy solution would be to include vertical-align: top;

.expandable-section {
    width: 50%;
    margin: 0 0 25px;
    clear: both;
    display: inline-block;
    vertical-align: top;
}

Answer 6

I'm not entirely certain about the desired appearance, but one easy solution would be to include vertical-align: top;

.expandable-section {
    width: 50%;
    margin: 0 0 25px;
    clear: both;
    display: inline-block;
    vertical-align: top;
}

Using Jquery slideToggle is creating additional spacing between inline-block divs

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to programmatically click on an href link in Firefox? The method that is typically used in Internet Explorer

Enhancing Forms with Redux and Styled Components

Transferring documents using JavaScript

Is it true that Firefox fails to display javascript errors on AJAX 'threads'?

Pressing the reset button will initiate once the loader has finished

Using CSS3 to apply transformations to multiple divs based on their individual attributes

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Classic leading and CSS line-height traditional styling

Error loading CSS file: 'Invalid MIME type detected, expecting text/css'

What is causing the failure of these "span" elements within an "a" tag in IE7?

Formatting your HTML tags in Visual Studio

Enhance the Search Box with a Vibrant Glow Effect When in Use

The order in which JavaScript is being executed is being reversed

Incorporate geographical data from a JSON file into my Google Maps application

Storing a color palette in a MySQL database from an HTML table

The index on ref in MongoDB does not seem to be yielding any improvements

Mongoose has a tendency to duplicate the mongodb collection within a single instance

What is the best way to create a fixed contact form on specific pages?

Determine the total number of hours along with the precise minutes

Troubles with Vue and localStorage for storing a theme's data