Add Toggle Switch

Does anyone know how to create a similar toggle switch shown in the screenshot below?

I would like to divide a client's home page into two separate "home" pages and we like the way this has been done. 

Here is the live example site being used for inspo - https://www.coastalcollectivemarketing.com

Not sure if there is an existing plug-in or previous thread that addresses this but any insight is appreciated!

Hi,

This is possible, I can help code with this. But I have a question

Click on each button >> Show corresponding content on current page (same as example site), or will send to new page?

If send to new page, I guess you can achieve with 2 Button Blocks

If current page, you can add 3 sections

Top with 2 button blocks

Second will be Our Services Section

Third will be Our Course Content

I will give code to

• CSS code to make Second + Third move up and behind First Section
• Hide First Section Content (Except 2 buttons) + Make Second content show on initial with CSS code
• Use JS code to, when users click on each button >> Show corresponding content

The switch is easy enough. You can do that in HTML/CSS alone. Changing the content of the home page without redirecting to a new page is a little harder and would require javascript to do it without redirecting. Managing multiple sections for two pages within one sqsp page would probably be a lot of effort too.

However, for education purposes here's how you could do the switch solely in HTML/CSS so no js required. Just chuck this into a code block.

<div class="toggle-switch">
  <input type="radio" name="tog" id="toggle1" value="1"/>
  <label for="toggle1">Services</label>
  <input type="radio" checked name="tog" id="toggle2" value="2"/>
  <label for="toggle2">Clients</label>
  <div class="toggle-shadow"></div>
</div>

<style>
  .toggle-shadow {
    width:50%;
    height:100%;
    position:absolute;
    border-radius:2rem;
    background:black;
    z-index:-10;
    transition:ease-in-out 0.2s;
  }
  .toggle-switch { 
    text-transform: uppercase;
    position:relative;
    width:100%; 
    display:flex; 
    justify-content: center; 
    align-items: center; 
    border:solid 2px black;
    border-radius:2rem;
  }
  .toggle-switch label {
    flex-grow:1;
    text-align:center;
    padding:0.5rem;
    border-radius:2rem;
    cursor: pointer;
  }
  .toggle-switch input[type="radio"] {
    display:none;
  }
  .toggle-switch input[type="radio"]:checked + label { 
    font-weight:bold; 
  }

  input:checked + label { color:white }
  #toggle1:checked ~ .toggle-shadow { left:0; }
  #toggle2:checked ~ .toggle-shadow { left:50%; }

</style>