Toggle accordeon from the "accordeon footer"

General
1

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

image
image1016Ă—177 9.93 KB

Is this possible?

2

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
3

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

4

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
5

@StrangeTech that would be great! Thanks in advance!

6

@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

7

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.

8

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
9

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

Thanks a lot!

10

@StrangeTech Dan, thanks for al the screenshots. It almost works. Only the rotation doesn’t work… I exactly did what i saw in the screenshats… changed the “v” in an image and everything works. Only the v and later the image doesn’t turn.

Am I missing something?

11

It works perfectly in my test demo.

These are the only parts that matter in that regard:

If you share your solution, I can help you debug.

12

Hi @StrangeTech,
I tried it again, but still not working:

image

image

image
image761Ă—515 22.3 KB

image
image270Ă—607 9.75 KB

De image I use instead of the v is this one:

image

But as said, I tried the V also.

Thanks in advance!

13

Easy fix - notice your spelling of the active class - you are using the non-English variety for accordion :+1:

As soon as you change it it should work.

2 Likes
14

Thanks @StrangeTech just a little typo…
Thanks a lot!!

1 Like