Toggle accordeon from the "accordeon footer"

I created a div below the header content and I want a button there to toggle the accordeon:

Is this possible?

This can be done in multiple ways, so a couple of questions are requred:

  1. What should happen to the button when the accordion is toggled?
  2. Where will the content be positioned relative to the footer / button, etc?
2 Likes

Hi @StrangeTech,

The footer goes down, the content comes in between.

So we get header content footer.

Button stays at footer. And if possible it turns 180 degrees so the arrow is pointing up

Hi @Lijn-B,

I have a working version of something very similar to this, I will share details with you as soon as I have time.

1 Like

@StrangeTech that would be great! Thanks in advance!

@StrangeTech any idea when you have some time? Would love to implement it soon. Otherwise I have to find another solution.

No time is an answer too.

Thanks in advance

Hey @Lijn-B,

I will share it here by Saturday, have had no time whatsoever but I can fit it in from Friday, I hope that works for you.

Hi @Lijn-B,

Here is the general strategy:

  1. Create an accordion with the standard Cwicly block structure:
    Screenshot 2024-05-09 at 18.19.49

  2. Create a global class for the accordion and add the following styles:

  1. Add the following relative styles:
  1. Add the following styles to the relative style rules:

Notes:

  1. Ensure you add the advanced > custom scss for the button:after style shown above:
.relativestyle {
  content: "v"; // replace the "v" with whatever you want, the url to the down arrow button asset for example.
}
  1. This works by adding the accordion-with-footer class directly to the Accordion block, if you want to, you can slightly modify it to work with an Accordions block with just a few changes to the relative style rules.

Hopefully this gives you what you need.

1 Like

@StrangeTech WOW, thanks!
Iā€™m gonna check en implement it this weekend.

Thanks a lot!