Add Horizontal Display Option to Accordion & Toggle : ShortPoint Support

S

Shane

started a topic over 4 years ago

I am requesting that an option be added to the Accordion and Toggle elements to display them horizontally instead of vertically just like how the 'Simple List' element has a horizontal display option. I need the ability to create a dropdown menu in a bar at the top of the page instead of in a virtual side bar.

In additional to a horizontal option being added to Accordion and Toggle, it makes sense to me that a new ShortPoint Element that allows you to great a hoverable dropdown menu similar to what was demonstrated in this post. The implementation described in that post doesn't appear to be possible in a Modern Site Only environment, therefore a dedicated ShortPoint Element would solve that issue.

Either way, I would be happy if at least accordion received a horizontal option.

Thank you in advance.

Oksana Aloshyna

said over 4 years ago

Dear Shane,

Thank you for your request.

Let me please check if this is possible to achieve with a custom code.

We have just released the new version with horizontal display option for all list elements (like you already noticed in the Simple List) but this is not yet possible for Accordions and Toggles.
Will get back to you with an answer soon.

Best Regards,

Oksana Aloshyna

Oksana Aloshyna

said over 4 years ago

Dear Shane,

Per your request, I have done a couple of CSS experiments today with the Accordions element and here is a very basic look I achieved (please check the animation below).

I just want to make sure if this is something you are looking for (I mean in terms of layout) and if I got you correctly, before passing your request to our developer team:

S

Shane

said over 4 years ago

Hi Oksana,

Yes, this is exactly what I was trying to recreate!

Thank you!

S

Shane

said over 4 years ago

The only additional request I would make would be the option to hide the Open/Close (+/-) icons.

Am I able to recreate what you have done on the CSS tab of the accordion element?

Thanks again!

Oksana Aloshyna

said over 4 years ago

Hi Shane,

Thank you for answering, glad to hear that.

Will ask our developers to work on this code a bit to make it look better and fit different text sizes and let you know.

Regards,

Oksana

Oksana Aloshyna

said over 4 years ago

Hi Shane,

Sorry, looks like I lost track of your latest message. Here is the code of the section containing the element (for your convenience):

[section][section-item][row css-code=".sp-type-accordions%20%7B%0Adisplay%3A%20flex%3B%0Aflex-direction%3A%20row%3B%0A%7D%0A" css_code_compiled=".dynamic-unique-shortpoint-class-name%20.sp-type-accordions%20%7B%0A%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20flex-direction%3A%20row%3B%0A%7D"][column 12] [accordions css-code=".shortpoint-a%20%7B%0A%20%20margin%3A%200%2060px%200%2060px%3B%0A%7D%0A.shortpoint-toggle-icon-container%20%7B%0A%20%20display%3A%20none%3B%0A%7D" css_code_compiled=".dynamic-unique-shortpoint-class-name%20.shortpoint-a%20%7B%0A%20%20%20%20margin%3A%200%2060px%200%2060px%3B%0A%7D%0A.dynamic-unique-shortpoint-class-name%20.shortpoint-toggle-icon-container%20%7B%0A%20%20%20%20display%3A%20none%3B%0A%7D"][accordion title="A"]Sample content Sample content Sample content Sample content Sample content [/accordion] [accordion title="B"] Sample content Sample content Sample content Sample content Sample content[/accordion] [accordion title="C"] Sample content Sample content Sample content Sample content Sample content[/accordion] [/accordions] [/column] [/row] [/section-item] [/section]

To explain it shortly, I added some CSS into the row containing accordions (this can be any parent element. In this case we have the row, but it can be a panel or something else if you prefer):

.sp-type-accordions {
display: flex;
flex-direction: row;
}

This part takes care of the horizontal display.

***

In the Accordions element itself, I have used this CSS:

.shortpoint-a {

margin: 0 60px 0 60px;

}

.shortpoint-toggle-icon-container {

display: none;

}

Please note that the margins are custom and you may need some adjustment per your page.
The second part hides the icons.

Please tell if it worked for you, excited to hear about if the result was achieved :)

Kind Regards,
Oksana