Split Accordions into Columns - Free CSS - Elementor Wordpress Tutorial - Elementor Pro
ฝัง
- เผยแพร่เมื่อ 11 ก.ย. 2023
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
This is how to Split Accordions into Columns - Free CSS - Elementor Wordpress Tutorial - Elementor Pro
Thanks to Dave for the Code: daveden.co.uk/
Code:
selector .e-n-accordion{ display: block; column-count: 2; }
selector .e-n-accordion-item{ break-inside: avoid;}
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
Code:
selector .e-n-accordion{ display: block; column-count: 2; }
selector .e-n-accordion-item{ break-inside: avoid;}
How would you control how many columns for each screen size? example: change to 1 column for mobile.
Add @media min size css and that will sort it out
Hi, it wasn't working for me, but it was because in the current version of Elementor the classes had changed, so for the first line the new class for the selector is "elementor-accordion" and for the second line the new class for the selector is ".elementor-accordion-item", so the code goes like this:
selector .elementor-accordion{ display: block; column-count: 2; }
selector .elementor-accordion-item { break-inside: avoid;}
Other than that is a great solution and it looks beautiful, thanks a lot!
Same here, the names changed again, so the code goes like this:
selector .bdt-ep-accordion{
display: block;
column-count: 2;
}
selector .bdt-ep-accordion-item{
break-inside: avoid;
}
Thanks a lot !
This is perfect, I've been having to use multiple accordions before
Great tutorial Imran!
Exactly what i needed, you are the BEST :)
That's brilliant!
great u r method are always orsome ❤
Thanks for saving my day :)
Awesome!
Very good content thanks❤
Glad you liked it!
Hey
Maybe you can help me with another problem?
When I open an accordion it stretches text box from its next container
How can this be prevented?
thank you!
😂 you kept thinking about it from the live earlier today ;) amazing job man. 🎉
nice move man =)
Thank you :) It's great!!
I have another question about the accordion, hope you can help
I need to build 2 containers on the page next to each other, each container has a picture and next to the picture (on the right side) an accordion
The problem is that when you open the accordion, it expands the images of the container -
Is there a way to overcome this? And so that the opening of the accordion does not affect the length of the images?
Thanks!
Add an image widget instead of Cover for the image (if it is set as Container BG Image) and then set the height/width. Or set the image to be Contain.
@@websquadron Thank you so much!!! You are the best :)
Can you make a video:
Accordions with text and buttons and when you open one of the accordions the background image of the sections changes?
The container inside of the Accordion be changed for that.
Helpful, thanks! Though, I appear to be losing the top border on the second column. Also had to change the selector from ..e-n-accordion to: elementor-accordion (fwiw)
Have you set the borders for the heading and the content?
Thanks!@@websquadron - I set the border to 1px at Accordion > Style > Accordion. That's the only border setting I see other than the Advanced tab which sets a border around the entire thing.
fixed it by adding css border type and width to the offending accordion panel
Hello Imran, there is another version i found for this which equally good (if not better) utilizing display grid.
selector .e-n-accordion {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(20rem, 41.667vw + 0rem, 31.25rem), 1fr));
align-items: start;
gap: 0 1.25rem;
}
selector .e-n-accordion-item {
box-shadow: 0 0 0.625rem rgba(103, 103, 255, 0.05);
}
Nice one
What you need to change to split it into 2?
I tried your code and it got split into 4 columns :)
And how does this function on mobile? If the two or more columns remain (i.e. doesn't collapse into a single column) there's not a lot of point!
You would use the @media css to only have this apply for certain pixel widths.
+rep
🙄🙄🙄🙄
I'm sorry. I was excited, but this didn't work for me.
Why not? What went wrong?
Me neither. Nothing happens. Probably wrong class.
@@websquadron Thanks for getting back to me, sorry I didn't get back to YOU. I can't tell you what happened, other than to say "nothing." I watched it several times to make sure I got it right, but when I pasted...nothing.
@@websquadron guess what? I changed 'e.n." to "elementor-accordian" and it works now! Thank you!
@@websquadron Hi, it works for me, but when I open the accordion everything breaks and does not look good, I think the problem is in the second line of code
selector .e-n-accordion-item{ break-inside: avoid;}
with or without it, everything looks the same, what could be the error?