Generate an accordion drop indicator

Within this tutorial, you will acquire knowledge on crafting an interactive drop indicator that can be incorporated into your accordion and collapsible panels.

Prior to initiation

• Grasp the process of forming a personalized accordion
• Additionally, review the technique for developing a customized dropdown menu

In this instructional session

1. Integrate and customize the indicator
2. Formulate the animation
3. Designate the impacted category

Integrate and customize the indicator

This step is straightforward. You have the freedom to employ any element — in our case, an image is utilized. The image portrays a down indicator. Position it within the accordion trigger, directly beneath the corresponding query within the navigator (H3). Next, establish a class (vital for the interaction). Adjust the size as desired. This can be done by estimation (pressing down shift while utilizing the up and down arrows to adjust by increments of 10).

Subsequently, duplicate the same element (the indicator) and place it after other headings in the accordion. Given that they share the same class, modifying the style of one will inevitably impact all.

Formulate the animation

This marks the initial phase. Let’s embark on crafting the animation. The trigger that initiates the interaction is the accordion’s item trigger. With it selected, enhance the existing trigger by incorporating an action. The trigger operates upon mouse click (or tap), featuring two states: first click and second click. Upon the first click, proceed to introduce the opening animation. Since the indicator currently points downwards, a solitary action suffices (simultaneous with the content’s animation). Implement a rotation of 180 degrees, converting it to an upwards orientation.

To ensure consistency with the remaining animations, adjust the easing (specify an ease animation curve) and reduce the duration (set a lower value).

If you preview the sequence, it should function seamlessly. Conclude this phase and implement the inverse for the closing animation. Introduce an additional step in conjunction with the existing action. Rotate the indicator back to its initial position by setting the rotation to zero. Adjust the easing (opt for ease once more) and lessen the duration.

Upon previewing, observe that the initial query slides out while the indicator duly rotates — meeting expectations. However, the subsequent queries do not share the same behavior.

Designate the impacted class

Proceed with designating the impacted class. This process is straightforward. Given that this animation pertains to the accordion item trigger, solely the children of the trigger should be affected during the first and second clicks (considering the indicator’s position as a child of the trigger).

While handling the first click, select the action concerning the indicator. Ensure it affects not the chosen entity, but the class instead. Specify that this modification should apply to the children of the trigger.

Following completion, replicate the process for the second click. Target the down indicator and confirm that the class is being impacted — specifically, the down indicator class. Opt for the children of the trigger as the affected entities since the indicator functions as part of each trigger.

Following these steps will enable you to animate a down indicator into an upward indicator.