Wordpress pricing table with toggled views!

Published: 28 April 2023
on channel: BuildingOnWordPress (with Josh Donnelly)

1,206

Easily create a pricing table (or really anything else for that matter) that has two views and control those views with a modern toggle.

Intro: 0:00
Designing: 1:18
Toggle: 10:22
Toggle Styles: 11:45
Togge Functionality: 15:02

CodePen work by Matt Smith: https://codepen.io/AllThingsSmitty/pe...

Javascript: https://buildingonwp.com/resources/wo...

// Hide the annual section by default
const annualSection = document.getElementById('annual');
annualSection.style.display = 'none';

// Listen for changes to the checkbox
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
// Show the annual section and hide the monthly section
annualSection.style.display = 'block';
const monthlySection = document.getElementById('monthly');
monthlySection.style.display = 'none';
} else {
// Show the monthly section and hide the annual section
const monthlySection = document.getElementById('monthly');
monthlySection.style.display = 'block';
annualSection.style.display = 'none';
}
});

Watch video Wordpress pricing table with toggled views! online without registration, duration hours minute second in high quality. This video was added by user BuildingOnWordPress (with Josh Donnelly) 28 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,20 once and liked it 3 people.

1,65