Pricing component with toggle using HTML, CSS, and JS
Design comparison
Solution retrospective
I learned how to code in JS back in 2021, and after a period of not practicing I've forgotten so much of it. I wanted to practice through this project but I could not figure out how to switch contents with the toggle function. As you can see I used checkbox in HTML and I was wondering if anyone can help me come up with JS function accordingly... much appreciated in advance! :)
Community feedback
- @ipekulfetkaylanPosted almost 2 years ago
Hello, you can toggle with css and give a class to shape this class. When the user clicks the toggle button, you can have it scroll right and left. For this, you can select the class you give for toggle in js and assign a click event to it. You can add a new class to the transition when the user clicks it. In this class for example you can push the toggle button 20px to the left. For example:
const toggleEl= document.querySelector('.toggle'); const switchEL= document.querySelector('.switch'); switchEL.addEventListener('click',()=>{ toggleEl.classList.toggle('active') }) Css: .toggle.active .switch{ left: 21px; }0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord