Подтвердить что ты не робот

Toggle показать/скрыть div с кнопкой?

Надеюсь, это простой вопрос. У меня есть div который я хочу, чтобы скрыть/показать с помощью кнопки

<div id="newpost">
4b9b3361

ОТВЕТЫ

Ответ 1

Посмотрите на JQuery Toggle

HTML:

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

JQuery:

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

Для версий jQuery 1.7 и новее используйте

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

Для справки, пожалуйста, проверьте эту демонстрацию

Ответ 2

Чистый JavaScript:

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

СМОТРЕТЬ ДЕМО

JQuery

$("#button").click(function() { 
    // assumes element with id='button'
    $("#newpost").toggle();
});

СМОТРЕТЬ ДЕМО

Ответ 3

JavaScript - Toggle Element.style MDN

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function() {
  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
#content{
  display:none;
}
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

Ответ 4

Вот простой способ Javascript:

<script>
  var toggle = function() {
  var mydiv = document.getElementById('newpost');
  if (mydiv.style.display === 'block' || mydiv.style.display === '')
    mydiv.style.display = 'none';
  else
    mydiv.style.display = 'block'
  }
</script>

<div id="newpost">asdf</div>
<input type="button" value="btn" onclick="toggle();">

Ответ 5

Вот как я скрываю и показываю контент с помощью класса. изменение класса на ничто изменяет отображение на блок, изменение класса на "a" покажет отображение как none.

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-color:#777777;
  }
block1{
  display:block; background-color:black; color:white; padding:20px; margin:20px;
  }
block1.a{
  display:none; background-color:black; color:white; padding:20px; margin:20px;
  }
</style>
</head>
<body>
<button onclick="document.getElementById('ID').setAttribute('class', '');">Open</button>
<button onclick="document.getElementById('ID').setAttribute('class', 'a');">Close</button>
<block1 id="ID" class="a">
<p>Testing</p>
</block1>
</body>
</html>

Ответ 6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#hideshow').click(function(){
    $('#content').toggle('show');
  });
});
</script>

И html

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

Ответ 7

Попробуй с непрозрачностью

div { transition: all 0.4s ease }
.hide { opacity: 0; }
<input onclick="newpost.classList.toggle('hide')" type="button" value="toggle">

<div id="newpost">Hello</div>

Ответ 8

Вы можете использовать следующее:

mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');