Добавление класса из атрибута в BODY
 

немножко на говнокодил себе заготовку может кому то пригодится

суть такая: по клику, двойному клику, и на hover добавляется/убирается класс у BODY прописанный в атрибутах объекта . так намного гибче можно теперь добраться до всех элемента или до группы смотрите пример.
За код не ругайте а поправляйте

https://github.com/ur5fot/data-click-to-toggle-class
http://codepen.io/ur5fot/pen/Lpaogv

ur5fit,
зачем return?
https://github.com/ur5fot/data-click...ddClass.js#L15
почему бы не остановить цикл break
https://github.com/ur5fot/data-click...ddClass.js#L38

и нельзя создать множество независимых пар? или можно?

за return надо обдумать но без него работает нормально.

извинение не понял "и нельзя создать множество независимых пар? или можно?".

надо теперь написать для для свап, долгом нажатии, для мобильных устройств

три спойлера -- три ссылки каждая открывает свой div - можно?

да суть такая (подсмотрена в WordPress) : у нас есть элементы у которых прописаны атрибуты data-click='click' или data-dblclick='dblclick'или data-hover='hover' , если произошло событие click, dblclick, hover то доставляется класс BODY за писаный в атрибуте соответствующему событию. мы пишем :

<div data-click='click'>data-click='click'</div>
<div data-dblclick='dblclick'>data-dblclick='dblclick'</div>
 <div data-hover='hover'>data-hover='hover'</div>

<div class="class1">click</div>
<div class="class2">dblclick</div>
<div class="class3">hover</div>

.click .class1{ 
    margin-top: 0px;
    opacity: 1;
}
.dblclick .class2{
    top: 100px;
}
.hover .class3{
    height: 100px;
    width: 100px;
    background: fuchsia;
    border-radius: 50%;
}

в атрибуты мы можем записывать любые классы
можно управлять группой элементов так:

.click .class1,  .class2, .class3, .class4, .class5{ 
    margin-top: 0px;
    opacity: 1;
}

или только некоторыми делать все что позволяет css

вот три спойлера -- три ссылки каждая открывает свой div - можно? (но тут нужно будет отменить переход по ссылке)

<a data-click='spoiler1' href='#'>spoiler1</a>
<a  data-click='spoiler2' href='#'>spoiler2</a>
 <a  data-click='spoiler3' href='#'>spoiler3</a>

<div class="class1">spoiler1 open</div>
<div class="class2">spoiler2 open</div>
<div class="class3">spoiler3 open</div>

.class1{ 
    display: none;
}
spoiler1 .class1  { 
    display: block;
}
 .class2{ 
    display: none;
}
spoiler1 .class2  { 
    display: block;
}
 .class3{ 
    display: none;
}
spoiler1 .class3  { 
    display: block;
}

ur5fit,
ок

не много подправил код