Wprowadziłem Cię chyba w błąd, ponieważ w tym kontekście nieważne jest, czy napiszesz tak data-x="hello", czy tak data-x='hello'.
Proponuję, abyś zabrał się raczej do nauki czystego (pure) JavaScript, a nie z bibliotekami, dopóki nie opanujesz języka w stopniu zadawalającym.
Kod
.hiddens {
display: none;
box-shadow: 2px 4px 2px 4px grey;
}
.clicks {
background: lightgreen;
border: 2px outset green;
display: inline-block;
padding: 4px;
min-width: 1em;
min-height: 1em;
text-align: center;
user-select: none;
}
<body style="background: darkgoldenrod;">
<div class="hiddens">hidden
</div>
<div class="hiddens">hidden
</div>
Kod
function toggle_el(e) {
let clicks = document.querySelectorAll('.clicks');
for(let i=0;i<clicks.length;i++) {
let computed_style = window.getComputedStyle(document.querySelectorAll('.hiddens')[i]).getPropertyValue('display');
if(clicks[i] === e.target && computed_style == 'none') {
document.querySelectorAll('.hiddens')[i].style.display = 'block';
clicks[i].style.background = 'pink';
clicks[i].textContent = '-';
} else if(clicks[i] === e.target && computed_style == 'block') {
document.querySelectorAll('.hiddens')[i].style.display = 'none';
clicks[i].style.background = 'lightgreen';
clicks[i].textContent = '+';
}
}
}
document.addEventListener('click', toggle_el, false);