---
title: Toggle
---

[![Brad](https://bradsommer.com/hubfs/Brad_October2019/Images/logo-1.svg "Brad")](https://bradsommer.com/?hsLang=en)

Some additional information in one line

## How to Add a Production Toggle that triggers an OptinMonster Popup

### In this guide I will walk through the process

To start, we must create a product toggle using a radio input. My example looks like this:

<div id="versionselector" class="printed-selected">  
  <div>  
    <input type="radio" id="printed" name="book-type" value="printed" onclick="document.querySelector('#versionselector').classList.remove('ebook-selected'); document.querySelector('#versionselector').classList.add('printed-selected');" checked>  
    <label for="printed">Printed book</label>  
    <input type="radio" id="ebook" name="book-type" value="ebook" onclick="document.querySelector('#versionselector').classList.remove('printed-selected'); document.querySelector('#versionselector').classList.add('ebook-selected');">  
    <label for="ebook">E-book</label>  
  </div>  
  <a href="https://app.monstercampaigns.com/c/cxgtlilx0k3zxlqpghzp/" class="btn button red buy-button buy-ebook-button" style="margin-left:0px; margin-top:20px;">Add to cart</a>  
  <a href="https://app.monstercampaigns.com/c/ewibfl4qguumtac9xwfe/" class="btn button red buy-button buy-printed-button" style="margin-left:0px; margin-top:20px;">Add to cart</a>  
</div>

Next we need to add the CSS. You may want to adjust the CSS to fit your own needs.

.buy-button {  
      display: none;  
}  
.ebook-selected .buy-ebook-button {  
      display: inline-block;  
}  
.printed-selected .buy-printed-button {  
      display: inline-block;  
}  
input[type="radio"] {  
      display: none;  
}  
label {  
    background-color: #ffffff;  
    padding: 8px 20px;  
    border-radius: 0px;  
    cursor: pointer;  
    border: 1px solid #eaeaea !important;  
    color: #767474 !important;  
    font-weight: 600;  
    font-size:13px;  
    margin-top: 10px;  
}  
input[type="radio"]:checked + label {  
    background-color: #f2f0f0;  
    color: #333333 !important;  
    font-weight: normal;  
    border: 1px solid #74c8d8 !important;  
    border-radius: 0px;  
}

button.buy-button {  
    -webkit-box-shadow: 0 0 13px -4px rgb(0 0 0 / 31%);  
    -moz-box-shadow: 0 0 13px -4px rgb(0,0,0,.31);  
    box-shadow: 0 0 13px -4px rgb(0 0 0 / 31%);  
    border: none;  
    padding: 8px 25px;  
    margin-top: 25px;  
    margin-bottom: 5px;  
    font-weight: bold;  
    font-size: 13px;  
    padding: 8px 35px;  
    background: #e54d43;  
    color: #ffffff;  
    border-radius: 28px;  
    text-transform: uppercase;  
}

You may decide to make this different than what I have created.

[LinkedIn](https://www.linkedin.com/in/bradsommer/)  
[YouTube](https://www.youtube.com/channel/UCi7ngKAVx0bJRQOU7VXoZFg)

[Manage your information](https://na1.hs-data-privacy.com/request/DNLwPVDeCNtDV742BImDBQ)

 Cookie Settings

Copyright © 2026 BradSommer.com LLC