# Fade a div in and out with button click

**URL:** <https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603>\
**Category:** How do I?\
**Created:** [July 8, 2024, 12:02pm UTC](https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603 "2024-07-08T12:02:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![StefanSan](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@StefanSan](https://community.weweb.io/u/StefanSan)\
**Post date:** [July 8, 2024, 12:02pm UTC](https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603/1 "2024-07-08T12:02:30Z")

</div>

Hi,

i have a div that should not be displayed.  
with a button click it should be displayed.  
i do this with a variable (false and true), a workflow (changes the variable value) and a conditional rendering (depending on the variable value).  
no problem.

now i want to give the div an animation. it should fade in and fade out (not only display or not).  
i add an anmination to the div and it fades in by the button click.  
works.

but how to give the div now the second animation, that it should fade out, if i click the button again (and the variable becomes “false” again).

the keyframe for the fadein is:  
`@keyframes keyframe-edition-animation { 0% {opacity:0;width:0px;} 100% {opacity:1;width:200px;}}`

any ideas?  
thanks for help.  
stefan

---

<div class="post-metadata">

**Author:** ![StefanSan](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@StefanSan](https://community.weweb.io/u/StefanSan)\
**Post date:** [December 25, 2024, 5:31pm UTC](https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603/2 "2024-12-25T17:31:03Z")

</div>

Hello,  
has noone an idea?  
I want to fade in and out a menusection by clicking a button.  
The fade in works great.  
but how to fade out the objekt then by clicking the button again?  
I tryied to use states an put the diffrenet keyframes in to classes added to the states - but didnt work…  
thanks for help.  
Stefan

---

<div class="post-metadata">

**Author:** ![Yaj](https://avatars.discourse-cdn.com/v4/letter/y/eb8c5e/32.png) [@Yaj](https://community.weweb.io/u/Yaj)\
**Post date:** [January 9, 2025, 10:21pm UTC](https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603/3 "2025-01-09T22:21:10Z")

</div>

Try use opacity and transition also make sure you’re not conditionally rendering the object as this can mess up transitions.

---

<div class="post-metadata">

**Author:** ![michaeln](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaeln/32/8078_2.png) [@michaeln](https://community.weweb.io/u/michaeln)\
**Post date:** [January 10, 2025, 1:48am UTC](https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603/4 "2025-01-10T01:48:12Z")

</div>

I would probably accomplish this using an object variable with 2 props, one for display and another for state. For example:

```auto
xDivTransition {
  "visible": false,
  "transition": false
}

```

then the workflow for button click would be:

1. `xDivTransition.visible` → `true`
2. `xDivTransition.transition` → `true`

For the div itself, I’d create a custom state that is mapped to `xDivTransition.transition` and set the Conditional Rendering to `xDivTransition.visible`.

It’s not the most elegant solution, but I’ve used it in the past and it’s worked fine for me.

---

<div class="post-metadata">

**Author:** ![StefanSan](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@StefanSan](https://community.weweb.io/u/StefanSan)\
**Post date:** [March 2, 2025, 1:06pm UTC](https://community.weweb.io/t/fade-a-div-in-and-out-with-button-click/9603/5 "2025-03-02T13:06:46Z")

</div>

Hello,  
many thanks for your answer.  
I put away the conditional rendering and use two states with css width 0px and 200px. That works.  
The state corespondents to a variable.  
(And the new AI helps me also… :-))  
Stefan