5th Mar 2024, 5:40 PM
Ɲ𝚎𝚎τ ⸙
Ɲ𝚎𝚎τ ⸙ - avatar
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!
5th Mar 2024, 6:54 PM
Chris Coder
Chris Coder - avatar
5th Mar 2024, 10:26 PM
JaScript
JaScript - avatar
+ 3
Take a look at my example of toggle working: https://sololearn.com/compiler-playground/WcpqWngj9h4u/?ref=app I hope this helps...😎
5th Mar 2024, 6:06 PM
Solo
Solo - avatar
+ 3
//ternary expressions button1.addEventListener('click', function() { container1.style.height = container1.style.height==='200px'?'50px':'200px'; button1.textContent= button1.textContent=='↑'?'↓':'↑'; });
6th Mar 2024, 5:43 AM
Bob_Li
Bob_Li - avatar
+ 2
Thanks JaScript even better.
5th Mar 2024, 10:36 PM
Chris Coder
Chris Coder - avatar
+ 2
Chris Coder I answered a similar question two days ago :-) https://sololearn.com/discuss/3267742/?ref=app
5th Mar 2024, 10:50 PM
JaScript
JaScript - avatar
+ 1
Thanks guyss 😃👍👍
6th Mar 2024, 6:00 AM
Ɲ𝚎𝚎τ ⸙
Ɲ𝚎𝚎τ ⸙ - avatar