Available in Semplice 6 without any custom code

The Accordion Module is a native feature of Semplice 6! You can read more about how to create it without using custom code in this guide. However, the built in accordion module only has title and description text for each item (for now), so if you still prefer a more advanced custom method, continue reading this guide.

 

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

 

You can view a live example of this hack in action here.

 

 

Setting up the accordion trigger

We will use a Semplice button to trigger the expanded section. Create a new section, and place a Semplice button in the first row. Add a classname of "accordion-button" to the button in the button styles.

Important: you must place the button as the first element within the section. Otherwise, the hack will not work.

 

Creating your accordion content

Now that we've created our accordion trigger, we'll next want to build out the content that will be expanded. Add your content BELOW the trigger button like you would any other content in Semplice.

Note: make sure your content is placed within the SAME section as your button.

Add a classname of "accordion-section" to the entire section.

Adding the custom CSS

We'll need to add some custom CSS in order for the effect to take place. Add the following CSS under Customize > Advanced > Custom CSS in Semplice:

For Semplice 4 and 5

.accordion-section {
    transition: background 0.25s ease;
}

.accordion-section.active {
    background: #FFF !important;
}

.accordion-section .accordion-button a {
  font-size: 18px !important;
  transition: none !important;
  text-decoration: underline;
  position: relative !important;
}

.accordion-section .accordion-button a {
  transition: none !important;
  text-decoration: underline;
}

.accordion-section.active .accordion-button a {
    font-size: 0px !important;
}

.accordion-section.active .accordion-button a::before {
    content: "View less";
    font-size: 18px !important;
}

.accordion-section .accordion-button a::after {
    content: ">";
    display: inline-block;
    position: absolute;
    top: 15px;
    right: -15px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    transform: rotate(-90deg) scaleY(1.7);
}

.accordion-section.active .accordion-button a::after {
    transform: rotate(90deg) scaleY(1.7);
}

.accordion-section:not(.active) .row:not(:first-child) .column {
    height: 0px !important;
    overflow: hidden !important;
}

.accordion-section:not(.active) .row:not(:first-child) {
    opacity: 1;
}

.accordion-section .row:not(:first-child) {
    opacity: 1;
    transition: opacity 0.5s ease;
}

 

For Semplice 6

.accordion-section .accordion-button a div {
font-size: 18px !important;
transition: none !important;
text-decoration: underline;
position: relative !important;
}

.accordion-section.active .accordion-button a div {
font-size: 0px !important;
}

.accordion-section.active .accordion-button a div::before {
content: "View less";
font-size: 18px !important;
}

.accordion-section .accordion-button a div::after {
content: ">";
display: inline-block;
font-family: monospace;
margin-left: 5px;
font-size: 12px;
font-weight: bold;
transform: rotate(90deg) scaleY(1.7);
}

.accordion-section.active .accordion-button a div::after {
transform: rotate(-90deg) scaleY(1.7);
}

.accordion-section:not(.active) .row:not(:first-child) .column {
height: 0px !important;
overflow: hidden !important;
}

.accordion-section:not(.active) .row:not(:first-child) {
opacity: 1;
}

.accordion-section .row:not(:first-child) {
opacity: 1;
transition: opacity 0.5s ease;
}

You can customize the CSS above to tweak the effect timing, background-color or button text sizing.

 

Adding the javascript

Lastly, we'll need to fire the accordion event by way of custom JS code. You can place the following under Customize > Advanced > Custom JS:

(function($) {
 $('#content-holder').on('click', '.accordion-button', function(e) {
   e.preventDefault();
   $(this).closest( ".accordion-section" ).toggleClass('active');
   return false;
 });
})(jQuery);

In some setups of Wordpress you may need to use the following, if the above does not work:

 jQuery('#content-holder').on('click', '.accordion-button', function(e) {
 e.preventDefault();
 jQuery(this).closest( ".accordion-section" ).toggleClass('active');
 return false;
 });

 

Troubleshooting

Accordion only works once

This can happen if you have Single App mode enabled. You will need to either switch to Static Site mode, or view this article's troubleshooting tips for how to get custom javascript to work with Single App mode.

Expanded content is not displaying correctly

Make sure that BOTH your trigger button and your expanded content is contained within the same section, with the classname of "accordion-section" added to the section.

Also, ensure your button is placed within the FIRST row within your section, and that the "accordion-button" custom classname is applied to your button.