Форум программистов, компьютерный форум, киберфорум
mrtoxas
Войти
Регистрация
Восстановить пароль
Оценить эту запись

Спойлер на js

Запись от mrtoxas размещена 29.10.2016 в 23:47
Обновил(-а) mrtoxas 30.10.2016 в 02:28 (Правка кода)
Метки js, spoiler

CSS
1
2
3
4
.spoiler {display: inline-block; vertical-align: top;}
.block {width: 40px; height: 30px; background: tomato; margin: 5px;}
.spoiler__split {display: block; text-align: center; cursor: default; }
.spoiler__drop {padding: 1px 0;background-color: green;}
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="spoiler">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <span class="spoiler__split"></span>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
'use strict';
var spoiler = document.getElementsByClassName('spoiler');
[].forEach.call(spoiler, function(elem) {
  var split = elem.querySelector('.spoiler__split');
  if (split) {
    var drop = document.createElement('div');
    drop.className = 'spoiler__drop';
    drop.style.display = 'none';
    elem.insertBefore(drop, split);
    var targ = elem.lastElementChild;
    while (targ != split) {
      drop.insertBefore(targ,drop.children[0]);
      targ = elem.lastElementChild;
    }
    split.innerHTML = 'Open'
    split.addEventListener('click', function() {
      if (drop.style.display == 'none') {
        drop.style.display = 'block';
        this.innerHTML = 'Close'
      } else {
        drop.style.display = 'none';
        this.innerHTML = 'Open'
      }
    })
  }
})
Песочница
Размещено в Без категории
Просмотров 417 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.