Creating a toggle/switch to show different information

user_14178422 0
Viewed 149

I'm quite new to this but I'm trying to recreate a toggle that will show monthly/annual payments whether a monthly or annual button is clicked, similar to this: https://search4less.com/#pricing.

I have 2 sets of price cards in place but I'm not sure how to connect the toggles so it will work as expected. I'm using vue with this project.

Any help will be much appreciated.

Here is the code im using

    <div class="container">
  <label for="toggle_button">
        <span v-if="isActive" class="toggle__label">Monthly</span>
        <span v-if="! isActive" class="toggle__label">Annually</span>

        <input type="checkbox" id="toggle_button" v-model="checkedValue">
        <span class="toggle__switch"></span>
    </label>

    <b-row class="monthly">
   <b-col>       
    <b-card class="price-card">
        <template #header>
        <h4 class="mb-0 content-center title-colour">Search4Less</h4>
        </template>

        <b-card-body>
        <b-card-sub-title class="mb-2 content-center">€20<small style="font-size:10px">/per user</small></b-card-sub-title>

        <hr class="my-4">

        <b-card-text class="content-center">
            Limitless access Irish business<br>
             Intelligence Information.
        </b-card-text>

        <b-card-text class="small-text"><small style="font-size:14px;">(includes)</small></b-card-text>

        </b-card-body>

        <b-list-group class="content-center" flush>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Company Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Director Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Business Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>CRO Filings</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Watchlist</b-list-group-item>
        </b-list-group>

        <hr class="my-4">

        <div style="text-align:center;">
            <b-button variant="success">Subscribe Now</b-button>
        </div>

        
    </b-card>
    </b-col>   
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Plus</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center">€25<small style="font-size:10px">/per user</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less features +<br> 
                any 1 of the following
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(any one)</small></b-card-text>

            </b-card-body>

            <b-list-group flush class="content-center">
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>UK Data Access</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Export Bundle</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Due Dil Reports</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Document Search</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Enhanced Watchlist</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Subscribe Now</b-button>
            </div>

            
        </b-card>
    </b-col>
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Pro</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center price-colour">€30<small style="font-size:10px">/per user</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less and<br> 
                Search4less plus features.
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(best value)</small></b-card-text>

            </b-card-body>

            <b-list-group class="content-center" flush>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>More Data sets</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>All Features</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Saves time</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Relevant Results</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Better Insights</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Subscribe Now</b-button>
            </div>    

            
        </b-card>
        
    </b-col>    
 </b-row> 
</div>
<b-row class="annually" hidden>
   <b-col>     
    <b-card class="price-card">
        <template #header>
        <h4 class="mb-0 content-center title-colour">Search4Less</h4>
        </template>

        <b-card-body>
        <b-card-sub-title class="mb-2 content-center">€195<small style="font-size:10px">/per user p/a</small></b-card-sub-title>

        <hr class="my-4">

        <b-card-text class="content-center">
            Limitless access Irish business<br>
             Intelligence Information.
        </b-card-text>

        <b-card-text class="small-text"><small style="font-size:14px;">(includes)</small></b-card-text>

        </b-card-body>

        <b-list-group class="content-center" flush>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Company Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Director Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Business Reports</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>CRO Filings</b-list-group-item>
        <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Watchlist</b-list-group-item>
        </b-list-group>

        <hr class="my-4">

        <div style="text-align:center;">
            <b-button variant="success">Start Trial Now</b-button>
            <b-button variant="success">Subscribe Now</b-button>
        </div>

        
    </b-card>
    </b-col>   
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Plus</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center">€245<small style="font-size:10px">/per user p/a</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less features +<br> 
                any 1 of the following
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(any one)</small></b-card-text>

            </b-card-body>

            <b-list-group flush class="content-center">
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>UK Data Access</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Export Bundle</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Due Dil Reports</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Document Search</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Enhanced Watchlist</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Start Trial Now</b-button>
                <b-button variant="success">Subscribe Now</b-button>
            </div>

            
        </b-card>
    </b-col>
    <b-col>
        <b-card class="price-card">
            <template #header>
            <h4 class="mb-0 content-center title-colour">Search4Less Pro</h4>
            </template>

            <b-card-body>
            <b-card-sub-title class="mb-2 content-center price-colour">€295<small style="font-size:10px">/per user p/a</small></b-card-sub-title>

            <hr class="my-4">

            <b-card-text class="content-center">
                All of the Search4less and<br> 
                Search4less plus features.
            </b-card-text>

            <b-card-text class="small-text"><small style="font-size:14px;">(best value)</small></b-card-text>

            </b-card-body>

            <b-list-group class="content-center" flush>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>More Data sets</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>All Features</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Saves time</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Relevant Results</b-list-group-item>
            <b-list-group-item><i class="fas fa-check" style="color:green;"></i>Better Insights</b-list-group-item>
            </b-list-group>

            <hr class="my-4">

            <div style="text-align:center;">
                <b-button variant="success">Start Trial Now</b-button>
                <b-button variant="success">Subscribe Now</b-button>
            </div>    

            
        </b-card>
    </b-col>    
 </b-row>

</body>
</div>
</template>

<script>
export default {
    name: 'Pricing',
    
    data() {
        return {
            currentState: false
        }
    },

    computed: {
        isActive() {
            return this.currentState;
        },

        checkedValue: {
            get() {
                return this.defaultState
            },
            set(newValue) {
                this.currentState = newValue;
            }
        }
    }
}
vue.js css html jquery javascript
1 Answers

You don't necessarily need JavaScript:

body {
  font-family: Arial, Helvetica, Verdana, sans-serif;
}

.cards {
  display: flex;
}

.cards > div {
  border: 1px solid silver;
  border-radius: 5px;
  padding: 2px 5px;
  margin: 0 2px;
}

#toggle + label:before {
  content: 'Monthly';
}

#toggle:checked + label:before {
  content: 'Yearly';
}

#toggle:not(:checked) ~ .cards > :last-child {
  display: none;
}

#toggle:checked ~ .cards > :first-child {
  display: none;
}
<input type="checkbox" id="toggle">
<label for="toggle"></label>
<div class="cards">
  <div>
    <h3>Monthly</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </div>
  <div>
    <h3>Yearly</h3>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

user_74511090
Related