"transition: all 10s"(change height) is not working in script

Question

function myFunction1() {
  var a = document.getElementById("hidden_box_tr");
  var b = document.getElementById("updown");
  var c = document.getElementById("caution");
  if (a.style.display === "block") {
    a.style.display = "none";
    a.style.height = "10px";
    b.style.transform = "rotate(90deg)";
    c.style.opacity = "0";
  } else {
    a.style.display = "block";
    a.style.height = "150px";
    a.style.margin = "0px 0px 88px 0px";
    b.style.transform = "rotate(270deg)";
    c.style.opacity = "1";
  }
}

.caution {opacity:0;}

#hidden_box_tr {color:#453367;
                height:10px;
                overflow:hidden;
                display:none;
                transition: all 10s;}
        
.hidden_box {margin-bottom:20px;}

.toggle_button > p {display:inline-block;
                    font-weight:bold;
                    font-size:20px;
                    margin-bottom:50px;
                    cursor:pointer;}
          
#updown {transform: rotate(90deg);
         transition: all 1s;}   

<div class="toggle_button" onclick="myFunction1()">
            <p>click here</p><p id="updown">></p>
        </div>
        <div class="hidden_box">
            <table>
                <tr id="hidden_box_tr" >
                    <td id="caution">test</td>
                    <td id="caution">
                    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
                    </td>
                </tr>
            </table>
        </div>

i wanna put "transition: height 10s" when #hidden_box_tr height be 150px. now it looks like it suddenly change height but i want it change very smoothly by using transition

but it is not working

any help will be so appreciate!! thanks!!

Answer 1

I can see two problems:

1. Transitions do not work with changes to the display property. This is because there is no way to transition between the discrete values of 'none' and 'block'.
2. overflow:hidden doesn't work in a table. This is because overflow only works with block elements but a table has its own display style. The tr will always be its full height because that's how tables are formatted.

If I make a couple of minor changes to account for these then you can see it works as expected.

function myFunction1() {
  var a = document.getElementById("hidden_box_tr");
  var b = document.getElementById("updown");
  var c = document.getElementById("caution");
  if (a.style.height === "150px") {
    a.style.height = "10px";
    b.style.transform = "rotate(90deg)";
    c.style.opacity = "0";
  } else {
    a.style.height = "150px";
    a.style.margin = "0px 0px 88px 0px";
    b.style.transform = "rotate(270deg)";
    c.style.opacity = "1";
  }
}

.caution {opacity:0;}

#hidden_box_tr {color:#453367;
                height:10px;
                overflow:hidden;
                transition: all 10s;}
        
.hidden_box {margin-bottom:20px;}

.toggle_button > p {display:inline-block;
                    font-weight:bold;
                    font-size:20px;
                    margin-bottom:50px;
                    cursor:pointer;}
          
#updown {transform: rotate(90deg);
         transition: all 1s;}   

<div class="toggle_button" onclick="myFunction1()">
            <p>click here</p><p id="updown">></p>
        </div>
        <div class="hidden_box">
            <div>
                <div id="hidden_box_tr" >
                    <div id="caution">test</div>
                    <div id="caution">
                    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
                    </div>
                </div>
            </div>
        </div>

Answer 2

It's a good habit letting css to control the style and let js do it dynamic magic, so i moved all your style from the script and put it as a condittionasly class of the parent (with your example - the body tag).

So after changing your code a little (read notes on the end) to achieve your desired result:

function myFunction1() { 
  document.querySelectorAll('body')[0].classList.toggle('show'); 
}

.caution {opacity:0;}

.hidden_box {margin-bottom:20px;}
.hidden_box_tr {
    color:#453367;    
    transform: scale(0);
    max-height: 150px;
    margin: 0px 0px 88px 0px;
    transition: all 10s;
}
.show .hidden_box tr {
    transform: scale(1);    
}

.hidden_box tr td {
    opacity: 0;
    transition: all 10s;
}
.show .hidden_box tr td {
    opacity: 1;
}
.toggle_button {
    display:inline-block;
    font-weight:bold;
    font-size:20px;
    margin-bottom:50px;
    cursor:pointer;
    border: none;
    background: transparent;
}          
.toggle_button span {
    display:inline-block;
}
#updown {
    transform: rotate(90deg);
    transition: all 1s;
}   
.show #updown { transform: rotate(270deg); }         

<button class="toggle_button" onclick="myFunction1()">
  <span>click here</span>
  <span id="updown">></span>
</button>
<div class="hidden_box">
<table>
  <tr>
    <td>test</td>
    <td>                    testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br/>testtesttesttesttesttesttesttesttesttesttesttesttesttesttest
      </td>
    </tr>
  </table>
</div>

Couple of notes:

1. You got duplicate id (#caution) - but this is not relate directly to your question.
2. You can't animate nor do transition effect on display property.
3. You have an onclick event on a div that acts as button - so i change the element.