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>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!
Conta Exclusiva ChatGPT: Acesso Ilimitado
Desbloqueie o poder do ChatGPT com recursos premium. Aproveite 80,5% de desconto e garantia de 100% de satisfação. Junte-se hoje e viva a melhor experiência de chat com IA!
Cypress, do Zero à Nuvem: domine a automação de testes com confiabilidade e eficiência
Aprimore suas habilidades de automação de testes com Cypress, desde o início até a integração contínua.
Saiba Mais💻 Torne-se um Desenvolvedor Fullstack!
Domine as tecnologias mais requisitadas do mercado e conquiste sua carreira dos sonhos como Desenvolvedor Fullstack. Inscreva-se hoje!
Inscreva-se
NOVOS CONTEÚDOS
Gostou deste conteúdo?
Assine o E-Zine Ramos da Informática e receba semanalmente conteúdos exclusivos focados em desenvolvimento frontend, backend e bancos de dados para turbinar sua carreira tech.
📘 Conteúdo Exclusivo
Dicas, insights e guias práticos para alavancar suas habilidades em desenvolvimento e bancos de dados.
🚀 Hacks de Carreira
Ferramentas, atalhos e estratégias para se destacar e crescer rapidamente no mercado de tecnologia.
🌟 Tendências Tech
As novidades mais relevantes sobre desenvolvimento web, mobile e bancos de dados para você se manter atualizado.
Já somos mais de 5.000 assinantes! Junte-se a uma comunidade de profissionais que compartilham conhecimento e crescem juntos no universo tech.
