As soluções abaixo darão um caminho de como implementar em Javascript, JQuery, Angular e Vue.js.
Javascript puro
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
}<div id="minhaDiv">Conteudo</div>
<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>Solução em JQuery
$(function(){
$(".btn-toggle").click(function(e){
e.preventDefault();
el = $(this).data('element');
$(el).toggle();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="minhaDiv">Conteudo</div>
<button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>Angular JS
angular.module("ExemploApp", [])<body ng-app="ExemploApp">
<div id="minhaDiv" ng-init="MinhaDiv = true" ng-show="MinhaDiv">Conteudo</div>
<button type="button" ng-click="MinhaDiv = !MinhaDiv">Mostrar / Esconder</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>VAI GOSTAR: Boas práticas no desenvolvimento Angular
Vue.js
var app = new Vue({
el: '#app',
data: {
mostrar: true,
oi: "xuxa"
},
methods: {
mostrarEsconder() {
this.mostrar = !this.mostrar
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" @click="mostrarEsconder">mostrar/esconder</button>
<div v-if="mostrar">Minha Div Com v-if</div>
<div v-show="mostrar">Minha Div Com v-show</div>
</div>
Recomendamos
[GRÁTIS] Guia Completo Para Se Tornar um(a) Desenvolvedor(a) Full-Stack -Tenha em mãos este livro digital, onde irá lhe ensinar tudo sobre as principais tecnologias web e você dar o ponta-pé inicial no Universo Full-Stack!
NOVOS CONTEÚDOS