+ 2
Toggle effect
How do I add a toggle effect to close and open the drawer https://sololearn.com/compiler-playground/WvvTElmUvnPV/?ref=app https://sololearn.com/compiler-playground/WvvTElmUvnPV/?ref=app
7 Answers
+ 4
A simple way is to use the html 5 details element with out the need of JS. But that isn't as fun.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Since you're already halfway there lets continue with JS.
You just need to allow your code to know what opens means, and then use if and else statements to complete the logic.
1. Create a function to check if its open.
function isOpen() {
return container1.style.height === '200px';
}
2. Create the if else statements.
button1.addEventListener('click', function() {
// If the container is open, close it
if (isOpen()) {
container1.style.height = '50px';
button1.textContent = '↓';
} else {
// If the container is closed, open it
container1.style.height = '200px';
button1.textContent = '↑';
}
- Happy Coding!
+ 5
This will help you:
https://sololearn.com/compiler-playground/WLebSnCFX1FX/?ref=app
+ 3
Take a look at my example of toggle working:
https://sololearn.com/compiler-playground/WcpqWngj9h4u/?ref=app
I hope this helps...😎
+ 3
//ternary expressions
button1.addEventListener('click', function() {
container1.style.height = container1.style.height==='200px'?'50px':'200px';
button1.textContent= button1.textContent=='↑'?'↓':'↑';
});
+ 2
Thanks JaScript even better.
+ 2
Chris Coder I answered a similar question two days ago :-)
https://sololearn.com/discuss/3267742/?ref=app
+ 1
Thanks guyss 😃👍👍