By Stephen Walker
Share
The Toggle Element styling leaves a bit to be desired as it applies hover effects to the entire block and not just the header and the panel. This should override that behavior but still takes advantage of the settings, thanks to the use of CSS variables.
/* Toggle Element */
.basic-toggle {
max-width:80ch!important;
}
.basic-toggle .fusion-panel{
margin-block-end: 10px;
}
.basic-toggle .fusion-panel,.basic-toggle .fusion-panel:hover{
background-color:unset!important;
}
.basic-toggle .panel-heading{
background-color:var(--awb-background-color)!important;
}
/* so boxed and unboxed look the same */
.basic-toggle .panel-title a,.basic-toggle .fusion-toggle-icon-wrapper,.basic-toggle .fusion-panel.fusion-toggle-no-divider.fusion-toggle-boxed-mode .panel-title a {
padding: 12px 25px!important;
}
.basic-toggle .panel-title a.active {
color: var(--awb-title-color)!important;
}
.basic-toggle .fusion-toggle-icon-unboxed .panel-title a.active .fa-fusion-box{
color: var(--awb-title-color)!important;
}
.basic-toggle .panel-title a.active:hover,.basic-toggle .fusion-toggle-icon-unboxed .panel-title a.active:hover .fa-fusion-box {
color: var(--awb-toggle-hover-accent-color)!important;;
}
.basic-toggle .panel-heading:hover,.basic-toggle .panel-heading:focus{
background-color:var(--awb-hover-color)!important;
}
.basic-toggle .panel-body {
padding:32px;
}
.basic-toggle .panel-body :is(p,li,dd,dt){
max-width:80ch;
}
.basic-toggle .panel-body :is(p,li,dd,dt) a{
text-decoration:underline;
text-underline-position:under;
}
/* boxed look without boxed behavior */
.faux-boxed .fusion-panel {
border: 1px solid var(--awb-background-color)!important;
}Example
Nunc excepturi. Neque fames nisi debitis, conubia hendrerit irure taciti ullamcorper, modi? Ducimus fusce euismod tristique ridiculus conubia, ipsa quos netus senectus! Iste habitant pellentesque eu officia quos ut fugiat sapien adipiscing, diam enim blandit consequat illum officia deleniti iure.
Vivamus rutrum cursus arcu hic velit exercitation interdum eveniet hic! Nullam potenti, tortor. Autem. Eius non eius commodo ducimus? Itaque proin molestiae per exercitation curae sapiente ullamcorper blanditiis! Porta amet. Placeat quo, mollis excepteur a maiores euismod sapiente, deserunt sed.
Scelerisque nec mus dolores, possimus quam viverra illum. Inceptos maecenas! Fugit magnam reiciendis porro ornare laoreet? Doloremque proin ratione anim! Anim mattis posuere ullam ipsum quaerat non earum! Irure excepturi! Perferendis quas, harum. Ad enim nulla repellat facilisi netus! Malesuada.
Nunc excepturi. Neque fames nisi debitis, conubia hendrerit irure taciti ullamcorper, modi? Ducimus fusce euismod tristique ridiculus conubia, ipsa quos netus senectus! Iste habitant pellentesque eu officia quos ut fugiat sapien adipiscing, diam enim blandit consequat illum officia deleniti iure.
Vivamus rutrum cursus arcu hic velit exercitation interdum eveniet hic! Nullam potenti, tortor. Autem. Eius non eius commodo ducimus? Itaque proin molestiae per exercitation curae sapiente ullamcorper blanditiis! Porta amet. Placeat quo, mollis excepteur a maiores euismod sapiente, deserunt sed.
Scelerisque nec mus dolores, possimus quam viverra illum. Inceptos maecenas! Fugit magnam reiciendis porro ornare laoreet? Doloremque proin ratione anim! Anim mattis posuere ullam ipsum quaerat non earum! Irure excepturi! Perferendis quas, harum. Ad enim nulla repellat facilisi netus! Malesuada.
Originally published on Feb. 19, 2023
Hi, you have helped me earlier on one of my requests, Thanks again.
If you dont mind and only if you have time to spare, I am facing another challenge in avada.
here in this webiste: https://birla-trimaya-devanahalli.birlaestates.com, there is a photo gallery section where the videos are stacked to each other and on hover it zooms out and play the video automatically. can you please write a code or suggest a way to exactly replica the same for my avada website.
Many thanks
The example (very interesting) is using the Owl Slider/carousel with some custom CSS and JavaScript. Unfortunately, JavaScript is not one of my strong skills and will be required to trigger the video to stop and start based on the width of the image/video container. I cannot make any guarantees, but I will see if I can figure it out. It will likely be an “all code” solution since the Avada elements are not going to make this easy.
Thankyou for your prompt reply, i see there is lot of time and work need to put to make this work, however instead for videos, can you display images in such design?
Take a look at https://awb4wp.com/demos/horizontal-accordion/
This is for post cards. Can you do this same with regular columns in Avada
That example is columns. I have not tried post cards yet.
i have tried to implement the same. not getting executed.
I just followed my instructions and was able to reproduce the effect. What isn’t working?
thanks for the assist, also if you find a way to place videos like we discussed, pls keep me updated
Hello there, hope you are doing great, did you if i may ask found a way to implement on loop videos to horizontal accordion? lemme know
I have been unable to find an accordion that would start and stop the video.
https://www.assetzproperty.com/63east/projects.php in this link, there is an implementation of tab secondary inside the primary tab. can you if possible get the exact replica in code written format or using your genius techniques would be helpful
I have been looking at this example and it could be done with Avada (global element shortcodes in a main tab – tabs within tabs), but it would take some planning and a good deal of custom CSS. This example has problems on desktop (jumps to the top of the page) and is terrible on mobile. Avada would put accordions inside the accordion to make it mobile friendly. For ease of maintenance and accessibility, I would not recommend the parent tabs (Towers) but list these down the page with the details in tabs.
sure no problem. i have posted another request in this comment section, lemme know if you can help me
https://www.assetzproperty.com/hereandnow/unit-plans.html
Hi, Thanks foir the earlier reply. This is another example, In here the trick is to segregate the Title of Tab/Accordion into 3 Splits. is it possible? lemme know
Not with Avada as there are too many limitation in the existing tabs and toggles elements (they haven’t been updated in a long time). Other builders and themes (Bricks, Generate Press+Generate Blocks, etc.) would make this possible because they allow for nested content with the headings and the panes.
Hi, Hope you are doing well, quick query – can u suggest me a technique to stack my tabs next to each other on mobile version. not carousal. (4 Tabs in single row should be fine with font size of 11 px)
current scenario is in mobile, first tab appears then the content and then the 2nd tab appears and it follows the same
Hello again, Hope you are doing well..
request you to embed a way to add “Load More Button” to dropdown more columns on any page. as avada provide next page pagnition which is not sufficient, as it takes you to second page.