Start with hidden div and show with button

Question

Start with hidden div and show with button

Navigation

#1 by (3 votes)

1

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

How to hide / show an HTML div?

javascript jquery html5 bootstrap-3

asked by anonymous 21.03.2017 / 23:02

1 answer

ERR_CONNECTION_REFUSED - Why can not the mobile phone find the absolute path of files through localhost? MySQL: Query Table N: N

score 3 · Accepted Answer

Based on the most voted and accepted response of the question that you presented, follow the solution alternatives, simply add the display:none property to 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><divid="minhaDiv" style="display:none">Conteudo</div>
<button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>

Angle 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>