Solución Javascript
En javascript puedes hacer el trabajo fácilmente usando el atributo onclick
para hacer una llamada a la siguiente función:
function visibilidad(selector, visible) {
var elemento = document.querySelector(selector);
if (elemento != null) {
elemento.style.display = visible?'block':'none';
}
}
Como parámetros puedes usar cualquier selector (sólo se modificará el primero si existen varios elementos que coincidan con el mismo selector) y el estado de visibilidad (valor que tendrá la propiedad CSS visible
): true
-> block
y false
-> none
.
Puedes ver más información acerca de los selectores CSS en este enlace.
function visibilidad(selector, visible) {
var elemento = document.querySelector(selector);
console.log(elemento);
if (elemento != null) {
elemento.style.display = visible?'block':'none';
}
}
#informacion {
display: none;
}
<div class="fileContainer">
<input type="file">
<button onclick="visibilidad('#informacion', true)">Mostrar</button>
</div>
<div id="informacion">
<p> Ejemplo </p>
<button onclick="visibilidad('#informacion', false)">Ocultar</button>
</div>
Solución Angular.js 1.6
En esta otra solución hacemos uso de la propiedad ng-hide
para determinar cuándo debe estar oculta la capa. En nuestro caso usamos como expresión el valor de la variable ocultar
.
Para gestionar los cambios de estado hacemos uso de ng-click
para cambiar el valor de ocultar
a false
(mostrar la capa) o true
(volver a ocultarla) en cada uno de los botones:
angular.module('pruebasApp', [])
.controller('pruebasCtrl', ['$scope', function($scope) {
/* El estado inicial será ocultar el contenido */
$scope.ocultar = true;
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js" integrity="sha256-7ngBGhPctUEyXLD6ha53TFUaqhBCnXFOi712aqBq094=" crossorigin="anonymous"></script><div ng-app="pruebasApp" ng-controller="pruebasCtrl">
<div class="fileContainer">
<input type="file"><br/>
<button ng-click="ocultar = false">Mostrar</button>
</div>
<div ng-hide="ocultar">
<p> Ejemplo </p>
<button ng-click="ocultar = true"> Ocultar </button>
</div>
</div>
[hide]
. Por ejemplo: https://angular.io/guide/template-syntax#template-expressions.