<div class="container">
<form class="toggle">
<input type="radio" id="choice1" name="choice" value="creative">
<label for="choice1">Speed</label>
<input type="radio" id="choice2" name="choice" value="productive">
<label for="choice2">Quality</label>
<div id="flap"><span class="content">productive</span></div>
</form>
</div>
:root {
--accent: #04da97;
--border-width: 6px;
--border-radius: 55px;
--font-size: 30px;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: #333;
font-family: sans-serif;
}
.container {
perspective: 800px;
}
.toggle {
position: relative;
border: solid var(--border-width) var(--accent);
border-radius: var(--border-radius);
transition: transform cubic-bezier(0, 0, 0.30, 2) .4s;
transform-style: preserve-3d;
perspective: 800px;
}
.toggle>input[type="radio"] {
display: none;
}
.toggle>#choice1:checked~#flap {
transform: rotateY(-180deg);
}
.toggle>#choice1:checked~#flap>.content {
transform: rotateY(-180deg);
}
.toggle>#choice2:checked~#flap {
transform: rotateY(0deg);
}
.toggle>label {
display: inline-block;
min-width: 170px;
padding: 30px;
font-size: var(--font-size);
text-align: center;
color: var(--accent);
cursor: pointer;
}
.toggle>label,
.toggle>#flap {
font-weight: bold;
text-transform: capitalize;
}
.toggle>#flap {
position: absolute;
top: calc( 0px - var(--border-width));
left: 50%;
height: calc(100% + var(--border-width) * 2);
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size);
background-color: var(--accent);
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
transform-style: preserve-3d;
transform-origin: left;
transition: transform cubic-bezier(0.4, 0, 0.2, 1) .5s;
}
.toggle>#flap>.content {
color: #333;
transition: transform 0s linear .25s;
transform-style: preserve-3d;
}
var viewMoreButtons = document.querySelectorAll('.more');
var toggleVisibile = function(el) {
if (el.style.fontSize === '0px' || el.style.fontSize === '')
el.style.fontSize = '1rem';
else
el.style.fontSize = '0px';
};
var toggleText = function(el) {
if (el.innerHTML === 'View Details')
el.innerHTML = 'View Less';
else
el.innerHTML = 'View Details';
};
var viewMoreButtonClickHandler = function(currBtn) {
var details = currBtn.previousSibling;
while(details.nodeType !== 1) details = details.previousSibling;
toggleVisibile(details);
toggleText(currBtn);
};
var moveDown = function(btnToMove) {
const st = {};
st.flap = document.querySelector('#flap');
st.toggle = document.querySelector('.toggle');
st.choice1 = document.querySelector('#choice1');
st.choice2 = document.querySelector('#choice2');
st.flap.addEventListener('transitionend', () => {
if (st.choice1.checked) {
st.toggle.style.transform = 'rotateY(-15deg)';
setTimeout(() => st.toggle.style.transform = '', 400);
} else {
st.toggle.style.transform = 'rotateY(15deg)';
setTimeout(() => st.toggle.style.transform = '', 400);
}
})
st.clickHandler = (e) => {
if (e.target.tagName === 'LABEL') {
setTimeout(() => {
st.flap.children[0].textContent = e.target.textContent;
}, 250);
}
}
document.addEventListener('DOMContentLoaded', () => {
st.flap.children[0].textContent = st.choice2.nextElementSibling.textContent;
});
document.addEventListener('click', (e) => st.clickHandler(e));
};
var addEventListenerPlus = function(i) {
viewMoreButtons.item(i).addEventListener('click',
function(e) {
var nextI;
viewMoreButtonClickHandler(this);
if (i%2 !== 0 && (i + 2) < viewMoreButtons.length) {
moveDown(viewMoreButtons.item(i+2));
}
}, false);
};
for(var i=0; i < viewMoreButtons.length; i++) {
addEventListenerPlus(i);
}