Accordion question

  • Resolved dsb0328

    (@dsb0328)


    4 years, 1 month ago

    I have a client asking for me to create an odd set of accordions and I’m wondering if it’s even possible with this plugin.

    They want me to have 5 icons horizontally in a row. Then they want arrows or plus marks under each icon that will open an accordion that opens and spans out under all of the icons, as if it were in its own row without columns. This is because there is so much content in each accordion. I think I can figure out how to trick the plugin to expand an accordion that exists of only content and the plus symbol directly below each icon in the same column. However, is it possible to have the accordion span the width of the full row instead?

    Hope this makes sense. If not, I’ll try to explain better if you let me know it doesn’t. Also, there isn’t a page with it executed yet, so I can’t share anything.

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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

    Thread Starter dsb0328

    (@dsb0328)

    Great! Thanks for the reply. I’ll try it out and let you know if it works.

    Thread Starter dsb0328

    (@dsb0328)

    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

    Thread Starter dsb0328

    (@dsb0328)

    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

    Thread Starter dsb0328

    (@dsb0328)

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Accordion question’ is closed to new replies.