Toggle effect

Question

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

Answer 1

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!

Answer 2

This will help you:

https://sololearn.com/compiler-playground/WLebSnCFX1FX/?ref=app

Answer 3

Take a look at my example of toggle working:
https://sololearn.com/compiler-playground/WcpqWngj9h4u/?ref=app

I hope this helps...😎

Answer 4

//ternary expressions

button1.addEventListener('click', function() {
container1.style.height = container1.style.height==='200px'?'50px':'200px';
button1.textContent= button1.textContent=='↑'?'↓':'↑';
});

Answer 5

Thanks JaScript even better.

Answer 6

Chris Coder I answered a similar question two days ago :-)

https://sololearn.com/discuss/3267742/?ref=app

Answer 7

Thanks guyss 😃👍👍