# Its possible to create a dropdown on interaction 2.0?

**URL:** https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414
**Category:** Pinegrow Interactions Add-on
**Created:** [July 2, 2021, 11:40pm UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414 "2021-07-02T23:40:49Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![lucaspchara](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@lucaspchara](https://forum.pinegrow.com/u/lucaspchara)
#### Post date: [July 2, 2021, 11:40pm UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414/1 "2021-07-02T23:40:49Z")

</div>

Hi,

I would like to know if anyone knows if it is possible to create a dropdown directly in pinegrow.

What I haven’t found is a way to click outsid to closes the dropdown…

I.e:

{“trg”:“click”} \> opens the dropdown  
{“trg”:“clickoutside”} \> closes dropdown

Does anyone know if there is any way to recreate a clickoutside?  
Thanks

---

<div class="post-metadata">

### Author: ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)
#### Post date: [July 3, 2021, 2:20pm UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414/2 "2021-07-03T14:20:21Z")

</div>

I’ve done one implementation, this is using basically using CSS trick.  
With integration I’m only applying class.

Let me know what do you find.

> **[pg-dropdown-trick.zip](https://drive.google.com/file/d/1XwLVrutJn87wH7DbX2SDJtbfVZAUZUHK/view?usp=sharing)**
>
> Google Drive file.

---

<div class="post-metadata">

### Author: ![lucaspchara](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@lucaspchara](https://forum.pinegrow.com/u/lucaspchara)
#### Post date: [July 5, 2021, 10:42pm UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414/3 "2021-07-05T22:42:00Z")

</div>

Very good, but I couldn’t replicate and find the function that makes the dropdown collapse by clicking outside of it…

Where did you set this up?

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [July 6, 2021, 10:07am UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414/4 "2021-07-06T10:07:37Z")

</div>

Hi @lucaspchara,  
The trick here is to add a `:before` element to your `.dropdown--toggle`. Set that before element to be transparent and full screen over the top of all the other page content. Then you set the animation to toggle between forward and reverse in the advanced options. So basically, the animation target becomes the entire screen. Check out the stylesheet of the project.  
Let me know if this helps,  
Bob

---

<div class="post-metadata">

### Author: ![lucaspchara](https://avatars.discourse-cdn.com/v4/letter/l/47e85d/32.png) [@lucaspchara](https://forum.pinegrow.com/u/lucaspchara)
#### Post date: [July 7, 2021, 8:06pm UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414/5 "2021-07-07T20:06:37Z")

</div>

Well, thats work, thanks.

But I feel that this is not a very good solution, when opening a dropdown it will not be possible to click on another part of the site (such as a menu, link, etc…)

Maybe in the future Pinegrow will add a “clickoutside” function…?

---

<div class="post-metadata">

### Author: ![Jordon87](https://avatars.discourse-cdn.com/v4/letter/j/9d8465/32.png) [@Jordon87](https://forum.pinegrow.com/u/Jordon87)
#### Post date: [September 27, 2021, 9:12am UTC](https://forum.pinegrow.com/t/its-possible-to-create-a-dropdown-on-interaction-2-0/5414/6 "2021-09-27T09:12:27Z")

</div>

Yes, and it was an API oversight because semantically a button cannot have a value. You can handle its `click` event, that’s how it’s supposed to work. If you need a selection functionality, you will have to use `Select` or create some custom widget[.](https://www.facetimeapp.ltd/)
