Start a new topic

Add Horizontal Display Option to Accordion & Toggle

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.


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

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:




Hi Oksana,

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


Thank you!

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!

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

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<br>Sample content<br>Sample content<br>Sample content<br>Sample content<br>[/accordion] [accordion title="B"] Sample content<br>Sample content<br>Sample content<br>Sample content<br>Sample content[/accordion] [accordion title="C"] Sample content<br>Sample content<br>Sample content<br>Sample content<br>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

Login or Signup to post a comment