Skip to content

Instantly share code, notes, and snippets.

@funnythingz

funnythingz/accordion.js

Last active August 3, 2018 05:58
Download ZIP

Revisions

  1. funnythingz revised this gist Aug 3, 2018. 1 changed file with 10 additions and 6 deletions.
    16 changes: 10 additions & 6 deletions accordion.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,7 @@
    var el = document.querySelectorAll('.el')[0];
    var elList = document.querySelectorAll('.el');

    // 全部とじる
    function allClose() {
    var elList = document.querySelectorAll('.el');
    for(var i, l = elList.length; i < l; i++) {
    (function(_el) {
    _el.classList.remove('open');
    @@ -22,9 +21,14 @@ function accordion() {
    allClose();

    // TOOD: 対象のものだけ開く
    targetOpen(el);
    for(var i, l = elList.length; i < l; i++) {
    (function(_el) {
    // TODO: elをクリックすると全部とじてクリックしたものだけ開く
    _el.addEventListener('click', function() {
    targetOpen(_el);
    }, false);
    })(elList[i]);
    }
    }


    // TODO: elをクリックすると全部とじてクリックしたものだけ開く
    el.addEventListener('click', accordion, false);
    accordion();
  2. funnythingz created this gist Aug 3, 2018.
    30 changes: 30 additions & 0 deletions accordion.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    var el = document.querySelectorAll('.el')[0];

    // 全部とじる
    function allClose() {
    var elList = document.querySelectorAll('.el');
    for(var i, l = elList.length; i < l; i++) {
    (function(_el) {
    _el.classList.remove('open');
    _el.classList.add('close');
    })(elList[i]);
    }
    }

    // ひらく
    function targetOpen(el) {
    el.classList.remove('close');
    el.classList.add('open');
    }

    function accordion() {
    // TODO: まず全部閉じる
    allClose();

    // TOOD: 対象のものだけ開く
    targetOpen(el);
    }


    // TODO: elをクリックすると全部とじてクリックしたものだけ開く
    el.addEventListener('click', accordion, false);