Requirements for Content Switcher Button in Elementor –
1 – Custom CSS option –Elementor Pro (paid) OR Royal Addons for Elementor(free)
Add following code in HTML widget of Elementor. Change the text Annually or Monthly to your desired text.
Annually
Monthly
Annually
Monthly
Switch Between Content with this toggle button
Pretty Easily. Support me via Donate, OR Subscribing.
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Annually</p>
</div>
<div class="toggle">
<p>Monthly</p>
</div>
</div>
<div class="inner-container" id='toggle-container'>
<div class="toggle">
<p>Annually</p>
</div>
<div class="toggle">
<p>Monthly</p>
</div>
</div>
</div>
<script>
var toggle = document.getElementById('container');
var toggleContainer = document.getElementById('toggle-container');
var toggleNumber;
toggle.addEventListener('click', function() {
toggleNumber = !toggleNumber;
if (toggleNumber) {
toggleContainer.style.clipPath = 'inset(0 0 0 50%)';
// Handle visibility of text elements
toggleTextVisibility(true);
} else {
toggleContainer.style.clipPath = 'inset(0 50% 0 0)';
// Handle visibility of text elements
toggleTextVisibility(false);
}
console.log(toggleNumber);
});
function toggleTextVisibility(showText1) {
var text1 = document.getElementsByClassName('text1');
var text2 = document.getElementsByClassName('text2');
// Determine the length of both arrays
var length1 = text1.length;
var length2 = text2.length;
for (var i = 0; i < Math.max(length1, length2); i++) {
if (showText1 && i < length1) {
text1[i].style.display = "none";
}
if (!showText1 && i < length2) {
text2[i].style.display = "none";
}
}
if (showText1) {
for (var i = 0; i < length2; i++) {
text2[i].style.display = "block";
}
} else {
for (var i = 0; i < length1; i++) {
text1[i].style.display = "block";
}
}
}
</script>
Add following CSS code in the Custom CSS option in the HTML widget.
And make the contents that need to be switched/toggled have classes “text1” and “text2”. You can add classes to anything like images, icons, videos, texts etc. It would automatically switch between text1 and text2 class contents.
#container {
width: 180px; /*Container size*/
height: 46px;
margin: auto;
position: relative;
border-radius: 5px;
overflow: hidden;
user-select: none;
cursor: pointer;
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: inherit;
height: inherit;
font-family: outfit; /*Font*/
font-size: 15px;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
}
.inner-container:first-child {
background:#F8F9FD; /*Inactive color*/
color: #a9a9a9; /*Inactive font color*/
}
.inner-container:nth-child(2) {
background: #FFFFFF;/*Active Color*/
color: #4C238F; /*Active Font Color*/
clip-path: inset(0 50% 0 0);
transition: .3s cubic-bezier(0,0,0,1);
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
box-sizing: border-box;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
Code explanation written with ChatGPT :
Introduction:
In this blog post, we’ll explore a simple yet effective way to implement a content switcher with a toggle button, allowing users to seamlessly switch between monthly and annually displayed content. This dynamic user interface utilizes HTML, CSS, and JavaScript (<script>) to achieve a smooth transition and toggling effect.
HTML Structure:
The provided HTML code establishes a basic structure for our content switcher. Inside a container (<div id=”container”>), there are two sets of toggles for “Annually” and “Monthly,” each wrapped in an inner container (<div class=”inner-container”>). The second inner container with the id ‘toggle-container’ (<div class=”inner-container” id=’toggle-container’>) will undergo a visual transition when the toggle button is clicked.
JavaScript Functionality:
The JavaScript code (<script>) is responsible for handling the toggle functionality. When the user clicks on the container, the ‘click’ event triggers a function. This function toggles between the two states by adjusting the clip path of the ‘toggle-container’ (toggleContainer.style.clipPath), creating a sliding effect. Additionally, the visibility of text elements is managed through the ‘toggleTextVisibility’ function. The console.log statement helps in debugging and understanding the toggle state.
CSS Styling:
The CSS styles (<style>) define the appearance of the container, inner containers, and toggle elements. The container (#container) has a fixed size, border-radius, and a color scheme indicating the active and inactive states. The clip-path property is used to create a visual sliding effect when switching between monthly and annually views.
Short Explanation:
HTML code represents the structure of a content switcher. It consists of a container (#container) containing two sets of toggles within inner containers (div.inner-container). Each inner container has two toggle elements (div.toggle) labeled as “Annually” and “Monthly.”
In the JavaScript section:
It gets references to the container and the ‘toggle-container’ using getElementById.
A click event listener is added to the container. When clicked, it toggles the toggleNumber and adjusts the clipPath of the ‘toggle-container’.
The toggleTextVisibility function handles the visibility of text elements based on the boolean parameter showText1.
In the CSS section:
Styles for the container, inner containers, and toggle elements are defined.
The first inner container has styles for the inactive state, and the second inner container has styles for the active state, including a transition effect.
Toggle elements are styled, and the first toggle is positioned to the right.
In summary, this code creates a visual content switcher with toggles for “Annually” and “Monthly,” allowing users to switch between the two states. The JavaScript handles the toggle functionality and adjusts the visual appearance, while the CSS defines the styling of the elements.
