For example, I have this function.
function showprintdiv() {
var x = document.getElementById('post-Print ');
if (!x.style.display || x.style.display == 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
I have this function 7 times with 8 sections that have an ID which is generated via
<div id="post-<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->name . ' ';
}
}
?>" class="col-md-4 no-pad containerhover">
Currently when I click a button, it hides or shows the content of post-Print
I want it to hide/show the content of the 7 other sections I have, so post-Print is there all the time.
I think there should be some way to hide every DIV with a class except for if they have the specified ID.
First of all, HTML id
attributes should not contain any spaces, so you'll need to adapt your PHP code for that. It is necessary before the following will work:
Focussing on your question: if you want to get to all the post-
elements, except one particular one, post-Print
, then use querySelectorAll
with a smart CSS selector [id^=post-]:not(#post-Print)
.
Here is a demo:
function showprintdiv() {
// Iterate over all elements that have an id that starts with "post-",
// except the one you want to keep visible:
var elems = document.querySelectorAll('[id^=post-]:not(#post-Print)');
Array.from(elems, function (x) {
if (x.id == 'post-Print') return; // don't touch this one.
x.style.display = (!x.style.display || x.style.display == 'block')
? 'none' : 'block';
});
}
// Demo: toggle visibility every half second:
setInterval(showprintdiv, 500);
<div id="post-Print" class="col-md-4 no-pad containerhover">post-Print</div>
<div id="post-1" class="col-md-4 no-pad containerhover">post-1</div>
<div id="post-2" class="col-md-4 no-pad containerhover">post-2</div>
<div id="post-3" class="col-md-4 no-pad containerhover">post-3</div>
</div>