Jump to content

Recommended Posts

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!

Screenshot 2024-02-28 at 12.17.01 PM.png

Link to comment
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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>

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.