Considering divs in accordions as a singular unit

Question

Considering divs in accordions as a singular unit

I am working with a grid of accordions presented like this:

<body>
    <div>
        <div class='accordion-left'>
            <h3>Left 1</h3>
            <div></div>
        </div>
        <div class='accordion-right'>
            <h3>Right 1</h3>
            <div></div>
        </div>
    </div>

    <div>
        <div class="accordion-left">
            <h3>Left 2</h3>
            <div></div>
        </div>
        <div class="accordion-right">
            <h3>Right 2</h3>
            <div></div>
        </div>
    </div>
</body>

In addition, there is a link to a jsfiddle showcasing the same.

When I click on "Left 1," based on how they are structured in HTML, I expected both "Left 2" and "Right 2" to expand together. However, that's not what happens as they end up misaligned. A similar issue arises when clicking "Right 1," resulting in only "Right 2" expanding. Ideally, if sibling divs have varying heights, I would want all matching bottom divs to drop down according to the tallest one.

Is there a way to treat these accordion div groups as a single entity?

jquery css jquery-ui

Answer 1

Answer №1

If you're looking to ensure equal height for your accordion items, consider implementing the "clearfix hack". You can find more information about this technique here.

Here's how you can apply it to your accordions parent element:

.accordion-parent:before, .accordion-parent:after {
    content:"";
    display:table;
}
.accordion-parent:after {
    clear:both;
}

Even if your accordions are on the same line, they should maintain the same height without any issues (demonstrated in my demo).

For a visual representation of the concept, check out the updated version of the demo here.

Answer 2

If you're looking to ensure equal height for your accordion items, consider implementing the "clearfix hack". You can find more information about this technique here.

Here's how you can apply it to your accordions parent element:

.accordion-parent:before, .accordion-parent:after {
    content:"";
    display:table;
}
.accordion-parent:after {
    clear:both;
}

Even if your accordions are on the same line, they should maintain the same height without any issues (demonstrated in my demo).

For a visual representation of the concept, check out the updated version of the demo here.

Answer 3

Answer №2

The reason for the issue is related to the use of the float property in your code. To resolve this, try using inline-block instead for your accordions. You can also adjust the width slightly so that the left and right elements appear on the same line. Additionally, if you want them to align vertically at the top, you can apply vertical-align: top.

div {
    vertical-align: top;
}

.accordion-left {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}
.accordion-right {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}

http://jsfiddle.net/2Un4u/5/

Answer 4

The reason for the issue is related to the use of the float property in your code. To resolve this, try using inline-block instead for your accordions. You can also adjust the width slightly so that the left and right elements appear on the same line. Additionally, if you want them to align vertically at the top, you can apply vertical-align: top.

div {
    vertical-align: top;
}

.accordion-left {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}
.accordion-right {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}

http://jsfiddle.net/2Un4u/5/

Answer 5

Answer №3

I made some adjustments to the code by introducing a container for both sections and organizing them as left-left and right-right instead of left-right, left-right. This way, the container sets the width and ensures that the accordion will always occupy 100% of the container.

Check out the modified code on JSFiddle

  <div class="container"> <!-- new class -->
    <div class='accordion-left'>
        <h3>Left 1</h3>
        <div></div>
    </div>
    <div class='accordion-left'>
        <h3>left 2</h3>
        <div></div>
    </div>
</div>

<div class="container"> <-- new class
    <div class="accordion-right">
        <h3>right 1</h3>
        <div></div>
    </div>
    <div class="accordion-right">
        <h3>Right 2</h3>
        <div></div>
    </div>
</div>

.container{
    width: 50%;  /* define width */
    display:inline-block;
    float:left;
}
.accordion-left {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}
.accordion-right {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}

Answer 6

I made some adjustments to the code by introducing a container for both sections and organizing them as left-left and right-right instead of left-right, left-right. This way, the container sets the width and ensures that the accordion will always occupy 100% of the container.

Check out the modified code on JSFiddle

  <div class="container"> <!-- new class -->
    <div class='accordion-left'>
        <h3>Left 1</h3>
        <div></div>
    </div>
    <div class='accordion-left'>
        <h3>left 2</h3>
        <div></div>
    </div>
</div>

<div class="container"> <-- new class
    <div class="accordion-right">
        <h3>right 1</h3>
        <div></div>
    </div>
    <div class="accordion-right">
        <h3>Right 2</h3>
        <div></div>
    </div>
</div>

.container{
    width: 50%;  /* define width */
    display:inline-block;
    float:left;
}
.accordion-left {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}
.accordion-right {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}

Considering divs in accordions as a singular unit

Answer №1

Answer №2

Answer №3

Similar questions

What is the best method for creating table column text within a Bootstrap Modal through JSON data?

Is it possible for Google to crawl and index a website that has minified HTML and CSS?

Utilizing a function within a span element

Excessive Blank Space Issue on Mobile Devices with MDBootstrap

Utilizing Arrays for Angular Data Binding with AJAX

Currently, I am developing a customized stylesheet specifically designed for Internet Explorer versions 10 and 11

Largest possible <main> container with footer positioned at the bottom

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

The $http patch request is failing to transmit data to the server

Is there a way to adjust the dimensions of the "col-sm-9" div class in terms of width and height?

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

How to download a dynamically generated PHP file to your local machine

What is the technique for placing a div element directly within the href attribute in a shape

Ways to incorporate the setTimeOut function

What is the best way to organize columns on the front end?

Tabbed Content: Interactive content revealed upon selecting a tab (Bootstrap)

Using jQuery and PHP to send a dynamic form through AJAX

Setting the attribute dynamically for a select box with multiple choices

"Securing digital signatures by storing them as base64 encoded data in the

The image refuses to align to the left side below a floated paragraph