Сделайте тег div переключателем между двумя классами css [дубликат]

На этот вопрос уже есть ответ здесь:

Что я хочу сделать, так это изменить класс тега div с помощью кнопки переключения с помощью javascript. Так что, когда я нажимаю кнопку один раз, тег div получает класс show, а когда я нажимаю ту же кнопку снова, он получает класс hide. Это возможно?

Html: 

<a id="togglebutton">Show/hide</a>

<div class="show"> 
   I want this div to toggle between the 'show' class and the 'hide' class
</div>

Css: 

.show {
    display: block;
}


.hide {
    display: none;
}

Js: 

function toggle(){
    var hide = document.querySelector(".hide");
    var show = document.querySelector(".show");

}

var hidebutton = document.querySelector(".togglebutton");
hidebutton.onclick = toggle

Можно ли как-то использовать document.getElementById("MyId").className = "MyClass";?

4 2
javascript toggle hide

4 ответа:

Вы можете использовать

if(document.getElementById("MyId").className == "hide")
   document.getElementById("MyId").className = "show";
else
   document.getElementById("MyId").className = "hide";

Но сначала вам нужно дать идентификатор div.. Пожалуйста, найдите ниже рабочий пример: http://jsfiddle.net/HvmmY/

4

Если вы просто пытаетесь показать / скрыть элемент, вы можете использовать стиль.свойство отображения: 

hidebutton.onclick = function(){
    var div = document.getElementsByClassName('show').item(0);
    if(div.style.display == '') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
}

Надеюсь, это поможет

0

Мне нравится использовать jquery для добавления / удаления классов <div>. Однако в вашей ситуации это может не сработать.

Вы могли бы использовать jQuery на нем с toggle:

$('#box').click(function() {
$('#box2').toggleClass('show hide');
});

Рабочий пример: http://jsfiddle.net/mFA5F/1/

Информацию о toggle() можно посмотреть здесь: http://api.jquery.com/toggle/

0

Живая Демонстрация

window.onload=function() {
  document.getElementById("togglebutton").onclick=function() {
    var show = this.innerHTML=="Show";
    document.getElementById("toggleDiv").className=show?"show":"hide";
    this.innerHTML=show?"Hide":"Show";
  }
}

Используя 

<a href="#" id="togglebutton">Hide</a>

<div id="toggleDiv" class="show"> 
   I want this div to toggle between the 'show' class and the 'hide' class
</div>
-1