How do you use toggle button to display 2 different website content?

Design help Layout & Design
1

Hi Webflow Forum,

I was wondering how to create a website like this one:

There are many tutorials on creating toggle switch animation, but I couldn’t find much information on changing up the website content when you turn on and off the toggle switch.

I do a lot of design work but also have been pursuing music. I thought it would be interesting to create a website that can show both my designer and musician sides.

Any guidance would be much appreciated. I appreciate any help you can provide.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @dashmoon,

Inspecting your mentioned site shows two outer divs:

  1. Div > Work content
  2. Div > Personal content

Initially, the 1. Div is set to display: block;. The 2. Div is set to display: none;. Clicking the toggle changes the display settings around.

This setup can be achieved very easily within Webflow.

Let me know if this helps.

1 Like