из двух кнопок сделать одну

[cubano]

Здравствуйте!

Подскажите пожалуйста, как сделать так, чтоб за открытие и за закрытие отвечала одна кнопка?

Например: Один раз нажал, галерея открылась. Второй раз нажал, закрылась.

http://codepen.io/tjbenton21/pen/LEpqmg


Заранее благодарен!

[рони]

cubano,
может хоть немного подучится, чтоб не спрашивать элементарные вещи и не плодите однотипные темы
classlist

for(var i = 0; i < buttons.length; i++){
 buttons[i].addEventListener("click", function(e){
     for(var c = 0; c < containers.length; c++){
   containers[c].classList.toggle("u-fancy-load--out")
   containers[c].classList.toggle("u-fancy-load--in")
   }
 }, false);
}

[рони]

вангую следующий вопрос ...
ответ тут коллекции-не-массивы

[cubano]

Огромное спасибо ! все получилось.


Извиняюсь за свои примитивные вопросы!

[warren buffet]

Попутно запомни ключевое слово - toggle. Такие штучки, кнопки-одиночки, переключалки логики чек-боксов*, с двумя состояниями называются toggle - это такая button, но застегивающаяся не через петельку, а через дырку в ткани (люверс). Тынц-тынц, застегнуто-расстегнуто, закрыто-открыто, и тп.

* В JQuery UI небось полно тоглей для оформления чекбоксов.

[warren buffet]

Теоретически может быть третье состояние, ундефайнед, но на вебе оно не применяется.

[cubano]

Наберусь наглости, и задам еще один вопрос.

Как сделать, чтобы галерея закрывалась по нажатию на область, за ее пределами?

Заранее благодарен!

[рони]

cubano,
галерея 1 или несколько?

[рони]

cubano,

document.addEventListener("click", function(e) {
    var target = e.target, items = document.querySelectorAll(".u-fancy-load--in");
    if(!items.length) return;
    while (target != document) {
        if (target.classList.contains("u-fancy-load") || target.hasAttribute("data-animation")) {
            return;
        }
        target = target.parentNode;
    }
    [].forEach.call(items, function(el) {
        el.classList.add("u-fancy-load--out")
        el.classList.remove("u-fancy-load--in")
    });

})

[warren buffet]

Здесь эротичнее сделать генеральную закрывашку на заранее ей известный идентификатор. Добавляешь этот класс к элементу и можно так открыть их много с защищенных от всплытия кнопок всяких, а потом щелк мимо и чпок все закрылись.