Accordion side by side

Support
#1

Uploading…

I want to use the accordion element, but I want them side by side instead of under each other like it is now. I want a list of accordions with 2 accordions side by side. How can I make this possible?

#2

Hi Erkan,

Thank you for writing in, Make your ROW a 1/5 columns or 1/4 columns (depends on how big you want the columns will be), then you need to divide your items in 2 separate Accordion element.



Happy New Year,
Cheers!

#3

I made an extra column, but the distance is too much and I also can’t get it side by side. Can I set 2 accordions in 1 column? Also if I make the Row 1/4 or 1/5 the text gets smaller.

Happy New Year!

Thank you in advance

#4

Hi There,

Please add the column-count-2 CSS class to your column:

After that add this custom CSS:

.column-count-2 {
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
     -moz-column-count: 2; /* Firefox */
     column-count: 2;
}
.x-acc {
     margin-bottom: 25px;
}

For more information about the column-count attribute, please take a look at this article:

https://www.w3schools.com/cssref/css3_pr_column-count.asp

Hope it helps :wink:

#5

Hey thank you I almost got it. The only thing now is that de accordion’s position is also under the classic custom headline and the button needs to be under the whole accordion, not just in the row of the accordion. How can I fix the postion problems?

#6

Hi There,

I would like to check your website but it’s under construction mode.

Would you mind providing us with your admin account so we can take a closer look?

Meanwhile, please update the previous CSS to this:

.column-count-2 {
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
     -moz-column-count: 2; /* Firefox */
     column-count: 2;
}
.x-acc {
     margin-bottom: 25px;
    clear: both;
}

Thank you.

#7

I have put it in a secure note, I also made the website public.

Thanks!

#8

Hi again,

You can remove the previous customization and CSS code and then add the following code in your Cornerstone’s page CSS:

.x-acc {
    width: 100% !important;
}

.x-acc .x-acc-item {
    margin-right: 1% !important;
    display: inline-block !important;
    width: 48% !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

Thank you! It worked. So happy right now.

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.