How to hide/show an element with a button in Webflow

Memberscripts needed

https://www.memberstack.com/scripts/toggle-item-visibility

Tutorial

Cloneable

Why/Use Cases

- Shorten pages by making unessential content available only on demand.

- Improve your site’s design and flow.

Using a button to hide or show elements on a Webflow site

Sometimes there are things you want to have on a page but don’t necessarily want them in full view at all times – e.g. FAQ accordions – you don’t need all the answers visible at all times, especially if they’re long.

This guide will show you how to hide content behind a link or a button and only make it available to those users who wish to see it.

To hide or show elements using a button on your Webflow site, we’re going to use MemberScript #124 – Toggle Item Visibility. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

For this to work, you’re going to need to create a button or link for showing the content, another one for hiding it, and then the content itself.

Once you’ve created and styled everything, go ahead and add the following attribute to the show button:

· ms-code-vis-show=”x”

On to the hide button, add this attribute to it:

· ms-code-vis-hide=”x”

Now for the content itself, add these attributes to it:

· ms-code-vis-item=”x”

· ms-code-vis-default=”hide” – this attribute tells it what its default state should be

You’ll notice that these attributes all have the same value and that is only to match them up with each other. The value can be anything you want and if you’re using multiple instances of hidden content on your page, you can use different values to match the buttons to the content they’re supposed to show or hide.

Making it work

Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #124 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test the buttons on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add links or buttons to your Webflow site that show or hide content when interacted with.

Take me to Cloneable!‍