| 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'
}
})
}
}) |
|
|
Категории блога
Локальные категории
