JSFiddle - React, Tailwind, and code Playground

Formulario verde colapsable

by Yolanda Robles

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="mainContainer">

<div class="barraHerramientas">
     <i class="fa fa-save fa-lg derecha botonGlyph btnAdd mostrar"></i>
     <i class="fa fa-remove fa-lg derecha botonGlyph btnCancel mostrar"></i>
     <i class="fa fa-arrow-right fa-lg derecha botonGlyph btnSave mostrar"></i>
</div>
<div class="space"></div>
<div class="headerContainer">
    <label class="tituloContainer">Datos del Contrato</label>
    <i class="fa fa-chevron-down derecha botonGlyph botonExpandir"></i>
</div>
<div class="bodyContainer">
  <div>
    <label class="control" style="margin-left:20px;margin-right:3px;">Nombre:</label>
    <input class="control"></input>
  </div>
  <div>
    <label class="control" style="margin-left:20px;margin-right:3px;">Nombre:</label>
    <input class="control"></input>
  </div>
</div>
<div class="space">
</div>
<div class="headerContainer">
    <label class="tituloContainer">Datos del Centro Productor</label>
    <i class="fa fa-chevron-down derecha botonGlyph botonExpandir"></i>
</div>
<div class="bodyContainer">
  <div class="barraHerramientas2">
     <i class="fa fa-plus-circle fa-lg derecha botonGlyph btnAdd mostrar"></i>
     <i class="fa fa-remove fa-lg derecha botonGlyph btnCancel ocultar"></i>
     <i class="fa fa-save fa-lg derecha botonGlyph btnSave ocultar"></i>
  </div>
  <div>
    <label class="control" style="margin-left:20px;margin-right:3px;">Nombre:</label>
    <input class="control"></input>
  </div>
  <div>
    <label class="control" style="margin-left:20px;margin-right:3px;">Nombre:</label>
    <input class="control"></input>
  </div>
</div>
</div>

CSS

.mainContainer{
  font-family: 'Segoe UI';
  width:98%;
  height:100%;
  background-color:#f5f5f5;
  padding-left:1%;
  padding-right:1%;
  padding-top:15px;
}

.headerContainer{
  background-color: #138973;
  border-style: solid;
  border-width: 1px; 
  border-color:#138973;
  width:100%;
  height: 28px;
  line-height:28px; 
}

.space{
  height:15px;
}

.barraHerramientas{
  background-color: #d9e1e1;
  width:100%;
  height:35px;
  padding-top:5px;
}

.barraHerramientas2{
  background-color: #d9e1e1;
  width:100%;
  height:28px;
}

.mostrar
{
  display:block;
}

.ocultar
{
  display: none;
}

.control{
  margin-top:7px;
  font-size:9pt;
  color:#138973;
}

.tituloContainer{
  margin-left: 15px;
  color:white;
  font-size:11pt;
}

.botonGlyph{
  cursor:pointer;
}

.botonExpandir{
  color:white;
}

.derecha{
  float: right;
  margin-top: 7px;
  margin-right: 10px;
}

.bodyContainer{
  width:100%;
  height: 120px;
  border-style: solid;
  border-width: 1px; 
  border-color:#c1cdcd;
  background-color: #fff;
}

JavaScript

$(document).ready(function () {

$('.bodyContainer').each(function(i) {
   $('.bodyContainer')[i].style.display  = "block";
});

$('.botonExpandir').click(function () {
		var indice = $('.botonExpandir').index(this);

		if ($('.bodyContainer')[indice].style.display == "block"){
    	// si se está mostrando
      $('.bodyContainer')[indice].style.display = "none";
    	$('.botonExpandir')[indice].classList.add('fa-chevron-right');
    	$('.botonExpandir')[indice].classList.remove('fa-chevron-down');
    }
    else{
    	$('.bodyContainer')[indice].style.display = "block";
    	$('.botonExpandir')[indice].classList.remove('fa-chevron-right');
    	$('.botonExpandir')[indice].classList.add('fa-chevron-down');
    }	
}); 

$('.btnAdd').click(function () {
		var indice = $('.btnAdd').index(this);
    
    $('.btnAdd')[indice].classList.remove('mostrar');
    $('.btnAdd')[indice].classList.add('ocultar');
    $('.btnCancel')[indice].classList.remove('ocultar');
    $('.btnCancel')[indice].classList.add('mostrar');
    $('.btnSave')[indice].classList.remove('ocultar');
    $('.btnSave')[indice].classList.add('mostrar');

}); 

$('.btnCancel').click(function () {
		var indice = $('.btnCancel').index(this);
    $('.btnAdd')[indice].classList.add('mostrar');
    $('.btnAdd')[indice].classList.remove('ocultar');
    $('.btnCancel')[indice].classList.add('ocultar');
    $('.btnCancel')[indice].classList.remove('mostrar');
    $('.btnSave')[indice].classList.add('ocultar');
    $('.btnSave')[indice].classList.remove('mostrar');

}); 

});