Collapse/Uncollapse element

We are using this template in this article, download it or simply use your own

Having collapse and uncollapse feature with AnimatorPro is so easy, you just have to select the element, select the button and do the magic !.

Going to section four (Content 2-6), we will find a heading 2, button and a paragraph, we want to hide the h2 and when we click the button we want it to slide down, another click h2 would slide up.

First select the h2 go to the PROP panel, under the Style section click on .content-2-6 h2 and create new style put it into your custom.css file, just change the overflow property to Hidden. Now click on the button, go to ACT panel and click on Animation 1, change the trigger to Click set the target .content-2-6 h2, we want our init state the text hidden, so change the Init state to height:0; and the Step 1 to height:auto;, also under the SECOND CLICK section change the Step 1 to height:0;

Slide Down-Up - On Click - 1

Slide Down-Up - On Click - 2

Slide Down-Up - On Click - 3

That’s it !, Save and test !.

Leave a comment

Your email address will not be published. Required fields are marked *