expand Registradores

by jpeter06

HTML

<!-- AĂ‘ADIR  class "contentMain" -->
<div id="containerGrafica" class="content contentMain fuenteContent">

  <!-- COPIAR -->
  <div class="lineaOculta">
    <spap>Grafica11111111111</spap>
    <spap>Grafica22222222222</spap>
    <spap>Grafica33333333333</spap>
    <spap>Grafica4444444444</spap>
  </div>
  <!-- END COPIAR -->
  
  <div>
    <button onclick="expandComprim()"> EC </button>
    <button onclick="expandComprimL()"> ECL </button>
  </div>
  

  <div class="grafica">
    GRAFICA
  </div>
</div>

CSS

.content{
  position:absolute;
  transition: all 1.5s ease;
  background: orange;
}

/** SOLO PARA LA GRAFICA*/
.contentMain{
  --wp: 70%;
  --hp: 40%;
}

.contentMain.fuenteContent{
  width: var(--wp);
  height: var(--hp);
  left: calc( 100% - var(--wp));
  top:  calc( 100% - var(--hp));
}

.contentMain.bigFuenteContent{
  width:100%;
  height:100%;
  top:0%;
  left:0%;
}
.contentMain.ejeXFuenteContent{
  width:100%;
  left:0%;
  height: var(--hp);
  top:  calc( 100% - var(--hp));
}

.grafica{
  background: #d80;
  border:5px solid #c70;
  color:white;
}
.grafica {
    position: absolute;
    height: calc(100% - 20px);
    width: 100%;
    top: 30px;
    display: flex;
    flex-wrap: wrap;
    }
/** ------------- COPIAR ------------*/
.contentMain{
  display:flex;
  flex-direction:column;
}

.contentMain .lineaOculta{
  max-height:0px;
  overflow:hidden;
  transition: max-height 1.5s ease;
}

.contentMain.bigFuenteContent .lineaOculta{
  max-height:40px;
}

.contentMain .grafica{
  flex-grow:2; /*Para ocurpar el espacio vertical que sobra*/
  position:static;
  width:auto;
}

JavaScript

function expandComprim(){
	var elem = document.getElementById('containerGrafica');
  if(elem.classList.contains('bigFuenteContent')){
  	elem.classList.remove("bigFuenteContent");
  	elem.classList.add("fuenteContent");
  }else{
    elem.classList.add("bigFuenteContent");
    elem.classList.remove("ejeXFuenteContent");
    elem.classList.remove("fuenteContent");
  }
  
}

function expandComprimL(){
	var elem = document.getElementById('containerGrafica');
  if(elem.classList.contains('ejeXFuenteContent')){
  	elem.classList.remove("ejeXFuenteContent");
  	elem.classList.add("fuenteContent");
  }else{
    elem.classList.add("ejeXFuenteContent");
    elem.classList.remove("bigFuenteContent");
    elem.classList.remove("fuenteContent");
  }
}