# New videos, please!

**URL:** <https://forum.builder.io/t/new-videos-please/171>\
**Category:** Feature Requests\
**Created:** [August 26, 2020, 12:28am UTC](https://forum.builder.io/t/new-videos-please/171 "2020-08-26T00:28:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![clickityclick](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/clickityclick/32/139_2.png) [@clickityclick](https://forum.builder.io/u/clickityclick)\
**Post date:** [August 26, 2020, 12:28am UTC](https://forum.builder.io/t/new-videos-please/171/1 "2020-08-26T00:28:10Z")

</div>

First, I’ll admit I only know enough to make a mess. I’m going crazy trying to get a dropdown menu that I’m happy with.

Could you make a two videos on how to make a nice dropdown menu that are click activated (not hover over)??

1. Using your own dropdown menu template. (I can’t get it be click activated)
2. Using one pulled off the web somewhere.

Some that caught my eye:

[https://react.rocks/example/rc-menu](https://react.rocks/example/rc-menu)

[https://react-bootstrap.github.io/components/dropdowns/](https://react-bootstrap.github.io/components/dropdowns/)

https://codepen.io/banik/embed/preview/exjLzB?height=300&slug-hash=exjLzB&default-tabs=css,result&host=https://codepen.io

Do you have a favorite place to look for such things?

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [August 26, 2020, 6:18pm UTC](https://forum.builder.io/t/new-videos-please/171/2 "2020-08-26T18:18:27Z")

</div>

Hi @clickityclick,

Thanks so much for taking the time to send us your feedback! We’re always looking to improve our user’s experiences with the platform. We are working on adding and improving our videos for our guides and docs.

For now, you can use our dropdown menu template and change the element actions in the data tab to create an on-click dropdown menu. To do so:

- Navigate to the layers tab and select the “dropdown container” layer. This is the layer that contains the element action (any element with a mouse icon contains an element action).

 ![Screen Shot 2020-08-26 at 1.55.32 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/fd43c9357d75c8acaff714a7ca102caada24b776.png)

- Once selected, navigate to the data tab and locate the “Element actions” section. There are two actions on this element, “mouse over” and “mouse leave”. To make this dropdown menu an “on click” instead of an “on hover” dropdown, select the “mouse over” action and change it to “click”.

![dropdown](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/b60169ff528fa1d79a4210f4ded242a53490bb69.gif)

Here is an example of an on-click dropdown menu: [https://builder.io/fiddle/276eaedd2b03474b89a8cbd8dfa65c91](https://slack-redir.net/link?url=https%3A%2F%2Fbuilder.io%2Ffiddle%2F276eaedd2b03474b89a8cbd8dfa65c91)

Another option would be using Builder’s “custom code” block and pasting code from the web. The custom code block works well for some things, but not perfectly for others. If you find code for a dropdown that you would like to use, it would be worth a try.

If you have any questions, don’t hesitate to reach back out 😁

---

<div class="post-metadata">

**Author:** ![clickityclick](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/clickityclick/32/139_2.png) [@clickityclick](https://forum.builder.io/u/clickityclick)\
**Post date:** [August 28, 2020, 3:32am UTC](https://forum.builder.io/t/new-videos-please/171/3 "2020-08-28T03:32:09Z")

</div>

Thanks. I did as you said and it works with a click to open, then to hoveroff to close. This is semi-mobile-friendly.

Your link didn’t work for me, but I’m guessing its the same video Steve has on youtube… its good.

I haven’t tried any custom stuff yet.

---

<div class="post-metadata">

**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\
**Post date:** [August 28, 2020, 4:54pm UTC](https://forum.builder.io/t/new-videos-please/171/4 "2020-08-28T16:54:33Z")

</div>

Of course! If you would like the dropdown menu to open on click and close on click:

- Navigate back to the click action in the data tab and edit the action.
- Replace the current code with: `state.dropdownMenuActive = !state.dropdownMenuActive`

Now, the dropdown menu will close when clicked on instead of hover off. Here is an example of an [on-click dropdown menu](https://builder.io/fiddle/998863df683842e4ba539b44a36c0941).

If you have any questions, let us know! 👍🏻

---

<div class="post-metadata">

**Author:** ![clickityclick](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/clickityclick/32/139_2.png) [@clickityclick](https://forum.builder.io/u/clickityclick)\
**Post date:** [August 31, 2020, 10:54pm UTC](https://forum.builder.io/t/new-videos-please/171/5 "2020-08-31T22:54:55Z")

</div>

This works well. Sometimes requires a page refresh.

Maybe similar to this, is there a way to have a single click button hide/show a section or box?

Is there a place somewhere with all the state. commands listed?

---

<div class="post-metadata">

**Author:** ![kara](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/kara/32/80_2.png) [@kara](https://forum.builder.io/u/kara)\
**Post date:** [August 31, 2020, 11:54pm UTC](https://forum.builder.io/t/new-videos-please/171/6 "2020-08-31T23:54:43Z")

</div>

Similarly to the dropdown menu, you can create an animation that will allow you to click on a box/section to hide or show the element. Here’s a guide that will walk you through how to add custom code: [https://www.builder.io/c/docs/guides/state-and-actions](https://www.builder.io/c/docs/guides/state-and-actions)

State is just something that you can use to create dynamic templates, and some of our templates use it too. You can use the guide above to learn more about how state works and how to use it.

If you have any questions, let us know! 👍🏻
