i'm trying to make a button that on click reveals and expand a div, giving the illusion that the button itself turns into the content, but after it expanded the second button doesn't play the transition to close it and if i click the first button again it opens without transition as well.

I'll leave here the jsFiddle sample that i was working on

html

    <div class="button">


  <button onclick="big(); delayed()">testing</button>
  <div id="content" class="fixed hidden">
    <p id="testo">just testing this thing</p>
    <button class="close" onclick="small()">X</button>
  </div>
  
  
</div>

css

  .button {
      position:relative;
      width:100vw;
      height:100vh;
    }
    
    .button > button {
      position:absolute;
      left: 50%;
      top:50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color:white;
      background-color:pink;
      border:none;
      padding: 30px;
      cursor: pointer;
    }
    
    .button > button:hover {
      background-color: purple;
    }
    
    .fixed {
      position:fixed;
      background-color:pink;
      left: 43.6vw;
      top: 29.4vw;
      text-align: center;
      width: 100px;
      height: 75px;
      transition: width 1s, height 1s, left 1s, top 1s;
    }
    
    .hidden {
      visibility:hidden;
    }
    
    .show {
      visibility:visible!important;
    }
    
    .bigger {
      width:100%;
      height:100%;
      left:0;
      top:0;
    }
    
    .close {
      border:none;
      background-color: red;
      position:absolute;
      top: 5px;
      right: 5px;
      color:white;
      cursor:pointer;
    }
    
    .

close:hover {
  background-color: yellow;
  color:black;
}

#testo {
  visibility:hidden;
}

js

    function big() {
  document.getElementById("content").classList.add('show');
  document.getElementById("content").classList.add('bigger');
}

function small() {
  document.getElementById("content").classList.remove('show');
  document.getElementById("testo").classList.remove('show');
}

function delayed() {
  setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
}