Clicking a button to show more info then clicking it to show less info

Question

I am creating a web site for a college outcome and I have made a button that when clicked performs a JavaScript function to increase the height of a HTML div and when the button is no longer hovered over, the size decreases. However I would like to know if and how I could make it so when the height is more if i click the button again the height will go to less. I believe a global variable could be used? but i'm not the most confident with JavaScript. I've attached the code below for my script. I haven't had any errors, it works as expected, I would just like to take a different approach to the solution for ease and aesthetics.

function showmoreinfo() {
    var x = document.getElementById("road");
    x.style.height = "600px";
    showlessinfo();
}

function showlessinfo() {
    var x = document.getElementById("road");
    x.style.height = "430px";
}

 <button onmouseout="showlessinfo()" onclick="showmoreinfo()" class="moreinfo"><i class="fa fa-arrow-down"></i></button>

FYI, 430px is the default hide of my div!

Any feedback is welcome!

I spent ~ 10 sec in google to found the solution: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp — adampweb, Nov 17 '20 at 18:50
Does this answer your question? [How do you create a toggle button?](https://stackoverflow.com/questions/309081/how-do-you-create-a-toggle-button) — adampweb, Nov 17 '20 at 18:50

score 1 · Answer 1 · answered Nov 17 '20 at 18:51

When you want to add a transition animation the easiest way is it to do it with css. Just toggle (add/remove) a class when you are clicking and do the rest with css.

function toggle() {
    var x = document.getElementById("road");
    x.classList.toggle('active');
}

#road {
  height: 430px;
  overflow: hidden;
  transition: height .4s ease-out;
}

#road.active {
  height: 600px;
}

 <button onclick="toggle()" class="moreinfo"><i class="fa fa-arrow-down"></i></button>
 
 <div id="road">
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
  Test<br>Test<br>Test<br>Test<br>Test<br>Test
 </div>

Clicking a button to show more info then clicking it to show less info

1 Answers1