[reposting deleted question with more detail] I've searched for an answer to this but not found a reference to anything similar. This is a minimal version of the HTML / CSS / Javascript:
function switchitem(id) {
var x = document.getElementById(id);
if (x.className.indexOf("item-wrap-hidden") != -1) {
x.className = "item-wrap";
} else {
x.className = x.className.replace("item-wrap", "item-wrap-hidden");
}
}
button.accordion {
background-color: #333;
color: #eee;
}
.active,
.accordion:hover {
background-color: #666;
}
.item-wrap {
overflow: hidden;
z-index: 0;
position: relative;
}
.item-wrap-hidden {
position: absolute;
left: -999em;
}
content that is hidden and revealed goes here
Run code snippetExpand snippet
Which works exactly as desired: the button is onscreen, when button is clicked the item-wrap box appears, when button is clicked again the item-wrap box disappears. In the production version, there's some styling and CSS animation.
I then went on to style the item-wrap box so its background is a blurred lower-opacity version of the body background image, which broke the functionality. Non-working minimal version:
function switchitem(id) {
var x = document.getElementById(id);
if (x.className.indexOf("item-wrap-hidden") != -1) {
x.className = "item-wrap";
} else {
x.className = x.className.replace("item-wrap", "item-wrap-hidden");
}
}
button.accordion {
background-color: #333;
color: #eee;
}
.active,
.accordion:hover {
background-color: #666;
}
.item-wrap {
overflow: hidden;
z-index: 0;
position: relative;
}
.item-wrap::after {
overflow: hidden;
content: "";
background-image: url("page_background_image.jpg");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
opacity: .8;
filter: alpha(40);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.item-wrap-hidden {
position: absolute;
left: -999em;
}
content that is hidden and revealed goes here
Run code snippetExpand snippet
Adding this deactivates the button once the content is revealed, so it can't be hidden again. On my production page, there are multiple accordion folds, and it deactivates the buttons for all of them, so once you've unhidden one fold you can't do anything else.
Changing the position property of item-wrap::after to absolute makes the page work as desired, but testing in Chrome and Safari on Mac there are lots of artifacts, and the page becomes twitchy, slower and less responsive. Here are linked examples:
Working Production Example - when the content is animated in the blurred image behind jitters, and the page is noticeably less responsive when scrolling
Broken Example - when any button is clicked to reveal content it deactivates all the rest of the buttons on the page. However, the background image doesn't jitter behind the animation on my machine, and the page doesn't become less responsive.
I am happy with my workaround (it's not a commercial project so the twitchiness is not an issue), but I am very curious as to why the position: property is affecting the functionality in this way. Anyone?
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)