Скрыть блок div по клику

263
28 октября 2017, 18:29

Нужно чтоб при нажатии одной ссылки закрывалась предыдущая. Не могу разобраться

function toggle(imgElem, divId) { 
 
  if(document.getElementById) { 
 
    var divElem = document.getElementById(divId); 
 
    if(divElem.className == "closed") { 
        divElem.className = "opened"; 
        document.getElementById("linkname").InnerText = 'КНОПКА'; 
 
    } else { 
        divElem.className = "closed"; 
        document.getElementById("linkname").InnerText = 'КНОПКА'; 
 
    } 
 
  } 
 
}
.closed {display:none;} 
.opened {display:block;}
<a href="#" id="linkname" onclick="toggle(this,'openbox')">КНОПКА</a> 
 
<div id="openbox" class="closed"> 
Text1 
</div> 
 
 
<a href="#" id="linkname" onclick="toggle(this,'openbox2')">КНОПКА</a> 
 
<div id="openbox2" class="closed"> 
Text2 
</div>

Answer 1

А чем вам JQuery не угодил?

function toggle(divId) { 
 
  if(document.getElementById) { 
 
    var divElem = document.getElementById(divId); 
    // нужно открыть или закрыть? 
    var opened = divElem.classList.contains("opened"); 
     
    var openbox_elems = document.getElementsByClassName('openbox-elem'); 
    for(var i=0; i<openbox_elems.length; i++){ 
        // закрываем все табы 
        openbox_elems[i].classList.remove('opened'); 
    } 
    if(!opened){ 
       // нужный был закрыт, открываем 
       divElem.classList.add('opened');  
    } 
 
  } 
 
}
.closed {display:none;} 
.opened {display:block;}
<a href="#" id="linkname" onclick="toggle('openbox')">КНОПКА</a> 
 
<div id="openbox" class="closed openbox-elem"> 
Text1 
</div> 
 
 
<a href="#" id="linkname" onclick="toggle('openbox2')">КНОПКА</a> 
 
<div id="openbox2" class="closed openbox-elem"> 
Text2 
</div>

READ ALSO
слайдер проблемы со слайдером [дубликат]

слайдер проблемы со слайдером [дубликат]

На данный вопрос уже ответили:

344
Фильтр по состоянию на React

Фильтр по состоянию на React

Всем добра! Делаю фильтр на реакте, получаю из инпутов значения - категория, метро, тип и данные из строки поискаНе получается отфильтровать...

381
не работает autoplay слайдера swiper в bootstrap tabs

не работает autoplay слайдера swiper в bootstrap tabs

добрый день! есть табы bootstrap (9 шт), в каждой табе есть swiper слайдерНе работает autoplay во всех вкладках (начинает работать autoplay, если первый слайд...

564
Написать калькулятор товаров на сайте

Написать калькулятор товаров на сайте

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

492