Elementor - Accordion Slider Revealing Content - with No Plugins
Now this may sound like a lot to do, but it's not if you focus on the codes for the Elementor Sections and Columns. You could now have a Full Width or a Boxed Width Accordion of Images that expand to show further content as you hover.
BUT - we're not using an Accordion!
WHAAAAAATTTTT !!!!!?????
Watch the Video and it will make sense.
The Codes below are different from the Video as they've been adapted slightly. Big thanks to this man who helped create the code: https://www.fiverr.com/hishamahmad007
Right, let's get to it;
------- SECTION CSS:
@media (max-width: 768px){
.acc-item{
flex: 0;
}
}
.acc-item{
flex: 1;
transition: all 0.8s ease;
}
.acc-item:hover{
flex: 8;
}
selector{
overflow: hidden;
}
------- COLUMNS
Give them the Class Name of acc-item
In the Custom CSS add this:
selector .straightheader{
opacity: 0;
transition: 0.5s ease-in-out;
}
/*Show Content on Hover*/
selector:hover .straightheader{
opacity: 1;
}
/*Hide Content on Hover*/
selector:hover .rotateheader{
opacity: 0;
}
/* Shading when not hovered*/
selector .elementor-background-overlay {
background-color: #000000;
opacity: 0.6;
}
/* Remove shading on Hover*/
selector:hover .elementor-background-overlay {
background-color: #000000;
opacity: 0;
}
selector{
overflow: hidden;
}
------- ITEMS INSIDE THE COLUMN
For all items inside the Column, ensure that they contain this CSS per Item
selector {white-space: nowrap;}
selector h2{
pointer-events: none;
}
AND...
Per Column, go to Style, and go to Background Overlay.
Even though the Overlay is applied inside the CSS, still click paintbrush, and ensure the 0.5 value is deleted to be blank.
Do that per column :)
AND.....
Adding Text Editor will cause the Columns to increase in height.
Make sure that you:
1. Give it the Class Name = straightheader
2. Add this into the Custom CSS for the Text Editor:
selector {white-space: nowrap;}
selector h2{
pointer-events: none;
}
3. And if you have long Text in there, then add breaks to text to apply returns.
And it will be fine.
-- Book an Appointment/Consultation: https://calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: https://websquadron.co.uk
PPS: Contact us at [email protected]
PPPS: We only build with Elementor Pro
Смотрите видео Elementor - Accordion Slider Revealing Content - with No Plugins онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Web Squadron 04 Февраль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 11,828 раз и оно понравилось 336 людям.