Plugin Contributor
alexgso
(@alexgso)
Hi,
Based on the layout you outlined, it sounds like the SiteOrigin Tabs widget may be a better fit than the Accordion widget. The Tabs widget will allow you to add a horizontal row of icons, and allow for the content to be below those icons.
You can make the Accordion (or tabs) widget full width by opening the row housing the widget and go over to the row styles sidebar. Open the Layout settings group and set the Row Layout to Full Width Stretched.
Kind regards,
Alex
Great! Thanks for the reply. I’ll try it out and let you know if it works.
Hey Alex. I tried the Tabs widget, and that didn’t seem to work for me. Since I don’t have a live example of what I am trying to accomplish, I am going to link to a couple of images of what I’m talking about.
Here’s what I can do with Accordions.
And here’s what I want to do with Accordions or something else.
Do you think this is possible with your page builder?
Thanks for the help, by the way.
Plugin Contributor
alexgso
(@alexgso)
Hi dsb0328,
Thank you for the screenshot. The provided example of your layout is how the tabs widget works. Can you please show me link me to the page where you attempted to use the Tabs widget? This will allow me to provide some suggestions on how you can better replicate this.
To do this with the Accordion widget you’ll need to force the panel to extend the full length of the page and that will, unfortunately, require some custom CSS. This can be done using the tabs widget without using CSS.
Kind regards,
ALex
I don’t have a live example as I am doing this in the background of a live site and it’s not supposed to be seen yet. And honestly, I just gave up on it because I couldn’t understand how this would work for my case. I get that I can have a plus sign as the title of each tab, but I don’t understand how to:
1. Get that plus sign to change to a minus sign, then switch back to a plus sign when another tab is clicked on.
and
2 Get each tab title (in this case, the plus sign) to line up with the corresponding image and title above it.
I could possibly talk the client into making the image title into the tab title, but still, how would I get it to line up with a row of corresponding images above the new titles.
Does this make sense?
Plugin Contributor
alexgso
(@alexgso)
Hi,
Ah. I had thought the previous image and title were separate. The panel title supports HTML so you could add those to the tab/accordion title by using HTML. As for the plus/minus, you’ll need to use a mixture of HTML and CSS to do that. Unfortunately, as that requires some custom coding it’s not something we’re able to assist with over the forums, but we could assist with it over premium support.
Kind regards,
Alex
If I was able to add the image and the title as the tab title, is it possible for the tabs to equally span the width of the page?
Plugin Contributor
alexgso
(@alexgso)
Hi,
Yes, that’s possible with a small amount of custom CSS. Unfortunately, as that requires some custom coding it’s not something we’re able to assist with over the forums, but we could assist with it over premium support.
Kind regards,
Alex
