Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: .

At present, I have implemented two sets of price cards in my layout. However, I am facing challenges in connecting the toggles to ensure they function correctly. This project is built using Vue.js.

Any assistance or guidance on this matter would be greatly appreciated.

Below is the code snippet I am currently working with:

    <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;
            }
        }
    }
}
javascripthtmljquerycssvue.js

Answer №1

Who needs JavaScript when you can achieve the same results with pure CSS:

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...
  </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 ...
  </div>
</div>

Here's another example using only CSS:

input[type="radio"]:not(:checked) + div {
    display: none;
}

body {
    display: grid;
    grid-template-areas:
        "tabHeaderA tabHeaderB"
        "tabContentA tabContentA";
}

input[type="radio"] {
    display: none;
}

label[for="a"] {
    grid-area: tabHeaderA;
}

label[for="b"] {
    grid-area: tabHeaderB;
}

#a + div {
    grid-area: tabContentA;
}

#b + div {
    grid-area: tabContentA;
}

label:hover {
  background-color: silver;
}

label {
  cursor: pointer;
    padding: 2px 5px;
    border-block-start: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

label:first-child {
    border-inline-start: 1px solid black;
}

label:not(:last-child) {
    border-inline-end: 1px solid black;
}

div {
    padding: 2px 5px;
    border: 1px solid black;
}
<label for="a">A</label>
<input type="radio" name="tab" id="a" checked>
<div>Content for A</div>
<label for="b">B</label>
<input type="radio" name="tab" id="b">
<div>Content for B</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changes made to the data are not reflected in the user interface, but they are visible in the console

When working on a React project with input fields, I encountered an issue where the date data can be changed but doesn't get reflected in the UI. Instead, the updated data is visible in the console. The code snippet below showcases how I'm using ...

javascriptreactjsreact-datepicker

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments

CSS3 Feature: Chevron-shaped banner with jagged edges

I'm currently working on building a unique chevron-style banner using CSS3, but I've run into some aliasing problems specifically in Chrome. Despite trying to utilize the -webkit-backface-visibility: hidden attribute, I still can't seem to r ...

htmlcss

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

htmlcss

Guide to authenticating users using Vue JS and Django

Currently, I am collaborating on a compact university venture utilizing Vue JS, Django2, and Django Rest Framework. The project involves two distinct user roles with varying actions within the application. The aspect that is leaving me puzzled is the logi ...

djangovue.jsauthenticationdjango-rest-framework

Converting yard values to meter values using AngularJS: A comprehensive guide

My task is to convert meter values to yard using two dropdowns. The first dropdown contains various values, while the second dropdown has "meter" and "yard" options. If "meter" is selected in the second dropdown, the values in the first dropdown remain unc ...

htmlangularjsvalueconverter

What could be causing my modal to not animate from the center of the screen?

I am aiming to have my .modal div class smoothly scale from 0 to 1 right in the center of the screen instead of starting at the bottom right and then moving to the center before settling in its final position. I have checked various resources like MDN docu ...

cssanimationtransformscale

Tips for achieving an HTML anchor effect using jQuery

In my click handler, I use "event.preventDefault" to prevent the default behavior. After a series of complex logic, I want the page to smoothly scroll back up to the top as if it were anchored. $('.vod-playlist-film a').bind("click", function(ev ...

jquery

"Alert: Jest has detected that an update to MyComponent in a test was not properly enclosed in an act() function, even though there was no actual update being made. Please

Here's a super straightforward test I've put together: it('renders', () => { const { toJSON } = render( <MockedProvider> <MyComponent /> </MockedProvider> ) expect(toJSON()).toMatc ...

javascriptreactjsjestjs

Do AngularJS routes allow the use of special characters in URLs?

Issue at hand: Every time I enter http://localhost:53379 in the browser, it redirects me to http://localhost:53379/#/. Why is the /#/ being added? angular .module('app', ['ngRoute', 'ngStorage']) .config([&apo ...

javascriptangularjshtml

The success method of .ajax() is indicating an error in the returned value

I am encountering an issue with a jQuery ajax call in my ColdFusion page. The code snippet is shown below: function fetchData(paramValue) { var URL = "/cfc/**somecfc.cfc**?method=**somemethod**"; $.ajax({ type: "POST", url: URL, ...

jqueryajax

Submitting late leads to several consecutive submissions

I am working on a jQuery code that aims to introduce a short time delay to allow for the proper execution of an AJAX request: $('#form_id').submit(function(e) { e.preventDefault(); $submit_url = $(this).data('submitUrl'); ...

javascriptjqueryajaxforms

Is there a Unicode character substitution happening?

There are certain mobile browsers that appear to have trouble supporting all unicode characters, such as the down arrow icon like this: span.icon:after { content:"\25be"; } Currently, no symbol is shown. Is there a way for me to identify this i ...

androidhtmlcssmobileunicode

Guide on submitting a multi-step form using jQuery

Greetings, I am in need of assistance with submitting a jQuery step wizard form. Although I have a plugin that helps, it primarily uses jQuery rather than HTML. So far, I have accomplished the following steps: - Set up the necessary database and table - C ...

phpjqueryhtmlforms

Updating form fields within nested forms using the FormBuilder array

The recommended method to change nested values according to the API documentation is using patchValue. For example, myForm.patchValue({'key': {'subKey': 'newValue'}}); But what if we need to change values in a nested array, ...

javascriptangularangular2-forms

The Angular 1.x Ajax request is not triggering the expected update in the view

I am encountering an issue with my Angular application where the data retrieved from a JSON file is not updating in the view when the JSON file is updated. It seems like the JSON file and the view are out of sync. As a newcomer to Angular, I am struggling ...

javascriptangularjsjsonajax

Using the 'type' field as a parameter in a Vue2 component object

I need help with passing an object into my component. Here is a snippet of the object's properties: { title: "myTitle", type: "myType" } However, when I define the prop in my component like this, I get a Vue runtime warning st ...

javascriptvue.jsvuejs2

Ways to set up various Content-Security-Policies and headers in your application?

In my email application, I am trying to prevent alerts in JavaScript by using a CSP header. However, even with the current policy in place, alerts can still execute when I send an HTML document attachment that contains script tags. Changing all JavaScript ...

javascripthtmlsecurityxsscontent-security-policy

Adaptive Table Layout that Creates a Page-breaking Design

I have a page layout with three columns: a fixed-width left-hand navigation, a responsive content column, and a fixed-width right-hand navigation. The issue arises when the content in the middle column includes HTML tables that sometimes exceed the availab ...

cssvue.jsbootstrap-4flexboxbootstrap-vue

Utilizing AngularJS ng-messages feature across various languages

Utilizing ng-messages to show error messages for form validation in my application. I have a multi-language app, how can I implement ng-messages to support multiple languages? HTML Form <div class="messages" ng-messages="myForm.email.$error"> & ...

javascriptangularjs