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

resolving date formatting issues in jQuery

The input field fromDate has a calendar pop up when focused for date selection. However, after selecting the date as 21/03/2014, the conversion to JSON date returns 20th March 2014: See my code snippet below: var fromDate = $("#fromDate").datepicker("get ...

jqueryjson

What are the issues with using AJAX in conjunction with a for-loop?

I'm currently developing a small application that needs to create work schedules and calculate hours: . I've written the function kalkulacja() to calculate the inputs for each row and output the results through ajax. However, I'm facing an i ...

javascriptphpajaxfor-loop

Exploring the nesting of client components in Next.jsIf you are

Exploring the realm of NextJS and React, I find myself delving into the realm of client components. One such client component I'm working with is called Form.jsx. It looks something like this: export default function FormHome() { ... a plethora of ...

javascriptreactjstypescriptnext.jscomponents

Inquirer doesn't waste time lingering for user input following a prompt

After initiating the prompt, I'm encountering an issue where inquirer doesn't pause for user input and instead immediately advances to the next command line. Below is the code I'm using: import inquirer from 'inquirer'; var link; ...

javascriptnpmmoduleinquirer

Guide on assigning a callback function in JavaScript

In this code snippet, I am initializing a new object variable and passing an object as an argument: const newObj = new customObject({ first : $('#fname').val(), last : $('#lname').val(), fn : function() { alert(this ...

javascriptjqueryobject

Creating dynamic grids in React.js by utilizing HTML

Currently, I am tackling one of the projects on FCC which is the Game of Life. Prior to diving in, my focus is on figuring out how to render a grid on the page. I aim to modify the table dimensions while ensuring it fits neatly within its container. The ...

javascripthtmlcssreactjscss-tables

Exploring PHP cURL with the power of jQuery

function php_download($Url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $Url); curl_setopt($ch, CURLOPT_REFERER, "http://www.example.org/yay.htm"); curl_setopt($ch, CURLOPT_USERAGENT, "MozillaXYZ/1.0"); curl_setopt($ch, CURLOPT_H ...

javascriptphpjquerycurl

Why does my ajax request show the result in the php file rather than redirecting to the html page?

I've developed a series of AJAX functions that retrieve data from a PHP file. However, one of the functions redirects to the PHP file to fetch data but fails to return to the HTML page for data insertion. Here is the code used to fetch a table from a ...

phphtmlajax

I am unable to view the GridView features that have been set using jQuery in the JavaScript code on the webpage

I'm facing an issue with the properties of a GridView. On the aspx page, I have a container using a <div>. <div id="DivRecords"> Within this container, I am dynamically adding a GridView using jQuery. In the js file, I am creating the Gr ...

javascriptjqueryasp.netgridview

Direct your attention towards the bootstrap dropdown feature

I have encountered an issue with using a bootstrap dropdown. I need to focus on the dropdown in order to navigate through its options using the keyboard. However, my current attempt at achieving this using jQuery does not seem to be working when I use $(&a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Determining if a Website is Responsive with PHP

One way to determine if a website is responsive or not is by analyzing its HTML code. A previous inquiry on this topic can be found here: . This method only focuses on checking for the <meta name="viewport" content="width=device-width"> tag. It&apos ...

phphtmlcssresponsive-design

Exploring the methods for interpreting a JSON object within a Vue.js framework

Here is the json object I am working with: const faqs = [{'question1':'answer1'},{'question2':'answer2'}] In my Vue.js code, I am attempting to iterate through this data using a for loop within a div like so: <di ...

vue.js

Image overlay fading effect with text appearing once the image fades

After exploring various hover effects and techniques to display text on hover, I still haven't found the answer to my specific question. My goal is to have an image with a transparent overlay that fades out on hover, revealing text in its place. It s ...

csshoveroverlay

Tips on how to horizontally center align a div when using the flex direction column technique

In my design, there is a container that consists of both a table and a div. The div has its display property set to flex with the flex-direction as column. I am trying to horizontally center align the div within the container. Below is the code snippet: ...

htmlcssflexbox

Attempting to squeeze a container with a set width into a parent element that spans the entire width of the screen (100

As I embark on my coding journey, I am faced with the challenge of creating a website that features full-width (100%) containers with fixed-width containers nested inside. Despite my efforts to experiment with both figures and divs, I have not been success ...

htmlcss

Problem Encountered with Inaccurate Binding of Dynamic Form Control Values in Angular

UPDATE: Follow this link to access the editor for my Stackblitz application, which demonstrates a simplified version of the issue regarding the "transfer" of value between the first and second controls. I am currently developing a dynamic form in Angular ...

htmlangulardomangular-reactive-forms

When using jqueryprint.js to print from Firefox browser, an additional blank page appears before the content

Seeking assistance in printing a section of an HTML page using PHP with a large header space for empty space after printing. Despite multiple attempts, achieving the desired result in Chrome, but facing issues with Firefox, which adds an additional page be ...

jquerycsshtmlprinting

The Nivo Slider experiences compatibility issues with webkit browsers when used in conjunction with Really Simple History (RSH) technology

I'm in the process of developing a website with AJAX capabilities, utilizing the Really Simple History (RSH) framework to manage back and forward requests. One challenge I've encountered is that when using Nivo Slider for a slideshow feature, it ...

jqueryajaxjsonnivo-sliderrsh

Ways to adjust image placement and size post-rotation with CSS/JS to ensure it stays within the containing div and avoids being cut off

Check out this jsfiddle I've been experimenting with. The jsfiddle is designed to rotate an image by 90 degrees in either clockwise or anti-clockwise direction upon button click. However, the rotated image currently appears outside of its parent div. ...

htmlcssangularjsrotation

Sorting Vue.js properties based on object keys

Currently, I am dealing with a complex object that contains multiple network interfaces. Each interface is represented by a key-value pair in the object: https://i.stack.imgur.com/klkhH.png My goal is to create a Vue.js computed property that filters thi ...

javascriptvue.js