버튼으로 div 표시/숨기기?

버튼으로 div 표시/숨기기?

이것이 쉬운 질문이기를 바랍니다.저는.div숨김/단추로 보여주고 싶은

<div id="newpost">

순수 자바스크립트:

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();
});

데모 참조

jQuery 토글 보기

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');
    });
});

참고로 이 데모를 확인해 주시기 바랍니다.

를 사용하여 토글링한 이후style예:

myElement.style.display = someBoolState ? "block" : "none"  

정말 나쁜 생각입니다. JS, jQuery, HTML, CSS의 몇 가지 예를 들어보겠습니다.

JavaScript .classList.toggle()

const elToggle  = document.querySelector("#toggle");
const elContent = document.querySelector("#content");

elToggle.addEventListener("click", function() {
  elContent.classList.toggle("is-hidden");
});

.is-hidden {
  display: none;
}

<button id="toggle">TOGGLE</button>
<div id="content" class="is-hidden">Some content...</div>

위와 같은 장점은 스타일링을 순수하게 해야 하는 곳에서 처리한다는 것이고, 그것이 당신의 스타일시트에 있다는 것입니다.또한, 를 제거함으로써..is-hidden클래스 당신의 요소는 원래의 모드를 되찾을 것입니다.block,table,flex, 아니면 뭐든.

jQuery.toggle()

.toggle()^문서
.fadeToggle()^문서
.slideToggle()^문서

$("#toggle").on("click", function(){
  $("#content").toggle();                 // .fadeToggle() // .slideToggle()
});

#content{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

jQuery - 토글

.toggle()요소를 토글합니다.display "block"/"none"가치

$("#toggle").on("click", function(){
  $("#content").toggleClass("show");
});

#content{
  display:none;
}
#content.show{
  display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

HTML5 - 다음을 사용하여 토글<summary>그리고.<details>

(IE 및 Opera Mini에서 지원되지 않음)

<details>
  <summary>TOGGLE</summary>
  <p>Some content...</p>
</details>

HTML - 다음을 사용하여 토글checkbox

[id^=toggle],
[id^=toggle] + *{
  display:none;
}
[id^=toggle]:checked + *{
  display:block;
}

<label for="toggle-1">TOGGLE</label>

<input id="toggle-1" type="checkbox">
<div>Some content...</div>

HTML - 다음을 사용하여 전환radio

[id^=switch],
[id^=switch] + *{
  display:none;
}
[id^=switch]:checked + *{
  display:block;
}

<label for="switch-1">SHOW 1</label>
<label for="switch-2">SHOW 2</label>

<input id="switch-1" type="radio" name="tog">
<div>1 Merol Muspi...</div>

<input id="switch-2" type="radio" name="tog">
<div>2 Lorem Ipsum...</div>

CSS - 스위치 사용:target

(단지 당신의 무기고에 그것을 가지고 있는지 확인하기 위해서)

[id^=switch] + *{
  display:none;
}
[id^=switch]:target + *{
  display:block;
}

<a href="#switch1">SHOW 1</a>
<a href="#switch2">SHOW 2</a>

<i id="switch1"></i>
<div>1 Merol Muspi ...</div>

<i id="switch2"></i>
<div>2 Lorem Ipsum...</div>

---

클래스 전환 애니메이션

JS / jQuery 중 하나를 선택하면 실제로 A를 전환할 수 있습니다.className, 요소에 애니메이션 전환을 언제든지 추가할 수 있으며, 기본적인 예는 다음과 같습니다.

const elToggle  = document.querySelector("#toggle");
const elContent = document.querySelector("#content");

elToggle.addEventListener("click", () => {
  elContent.classList.toggle("is-hidden");
});

#content {
  display: inline-flex; /* or whatever */
  transition: 0.6s;
}

.is-hidden {
  position: relative;
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
}

<button id="toggle">TOGGLE</button>
<div id="content" class="is-hidden">Some Togglable content...</div>

다음은 간단한 자바스크립트 방법으로 토글을 하는 방법입니다.

<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();">

불투명하게 시도하기

div { transition: all 0.4s ease }
.hide { opacity: 0; }

<input onclick="newpost.classList.toggle('hide')" type="button" value="toggle">

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

이렇게 수업을 이용해서 내용을 숨기고 보여줍니다.클래스를 nothing으로 변경하면 디스플레이가 블록으로 변경되고 클래스를 'a'로 변경하면 디스플레이가 nothing으로 표시됩니다.

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

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

다음을 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button