A collapsing div - accordion style

General Questions
1

I am avoiding bootstrap and other frameworks and want to use pinegrow’s native animation tool to create a simple expanding div so that when the user clicks on a + it toggles just one div below. I tried this several ways but it didn’t work very smoothly. I’ve tried collapsing the height but it squashes the text, I’ve tried rotation around the x axis but then you need to transform the origin or position (which I find a little confusing). I know there are tutorials and they see great but overly complex for such a seemingly simple interaction.

So basically something that just does what the top accordion does here https://codepen.io/kamelagandhi/pen/WjOpVY

Of course I can copy the code but I want to create more interactions around it. Any help or examples appreciated.

2

Hi @excede,
Isn’t it amazing how something that looks so simple and easy can be such a pain! :slight_smile:
So there are a couple of ways that you can do this, ranging from simple to complex. How you accomplish this partially depends on your HTML structure. I’m going to assume that you have a structure like this:

div
    h3.ac-section
    p.ac-content

For a really simple accordion that allows all panels open, you add a styling rule that hides the content:

.ac-content {
    display: none;
}

And a rule to add the plus:

.ac-section:before {
    float: right;
    content: "\002B";
}

Then you add an interaction to the ac-section where the trigger is a click on the element and the target is: ^div | .ac-content. THis will target the parent div of the section then traverse down the tree to the content. Add a custom animation and then a property of “Display” from “Not animated CSS”. It can be either set or tween because it isn’t animated. Finally, make sure that under the advanced options you select “Alternate forward/reverse”. This will allow the accordion to close with a second click. Once this is set-up, add a “Apply to many” interaction and for the target put “$h3.ac-section”.

This is a bare-bones accordion. The next step to improving this would be to add a class to allow you to change the plus icon to a minus. You could also use a class plus CSS animation to make your accordion a little more snazzy. You could even add an opacity animation to this one to make it a little jazzier.

Hope this provides a good starting point for experimentation,
Bob

2 Likes
3

ooooh… I see a tutorial vid in the making…

1 Like
4

Hi Rob, thanks for the explanation! Am I right in assuming that this (in the current simple form) will simply hide and display the whole block? What I’ve been struggling with is what animation to apply and how to initially have the animation start with the content div having no height then expanding to full height. I know how to do these interaction on other things (take a look at this page I built but it uses complex animations adding and removing classes etc but I’m sure it could have been done far more simply than I did it) see the one I created here: https://the.barneybed.com/warehousesale/

I would love to see a simple solution that…

  1. The space below is collapsed or hidden at the start
  2. When the + is clicked it smoothly expands the space below
  3. Then the content of the of the text fades in while sliding down behind the title above it.

I’ll try it myself but if you or anyone has a ready made example that would be fantastic too!

5

You should please check the Accordion example here with tutorial Interaction examples | Pinegrow Web Editor

It seems this example needs a good update. I’ve already done some work, so this should be updated in few days.

With newer updates on interactions, now you can set height: 0 and transition to height: auto, this will make it 100% smooth now.