Start with hidden div and show with button

Asked

Viewed 18,787 times

1

Based on the answer below, I created the button that displays and hides the div, but what I would like is that the div started already hidden and had a button to display it. How could do?

How to hide/show a div in HTML?

javascript jquery html5 bootstrap-3

1 answer

4


Based on the most voted and accepted answer of the question you presented, follow the solution alternatives, just add the property display:none in the style of div, using Angularjs ng-init="MinhaDiv = false"

Pure Javascript

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" style="display:none">Conteudo</div>
<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>

Solution in 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" style="display:none">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 = false" 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>

  • Perfect, Thank you !

  • @otaciojb Take a look at this link https://www.w3schools.com/css/ has many things you can do with the style of any element you want to use.

  • Okay, thank you again

Browser other questions tagged javascript jquery html5 bootstrap-3

You are not signed in. Login or sign up in order to post.