in Education by
[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)

1 Answer

0 votes
by
your button is blocked by the position: fixed pseudo element, give it position: relative and z-index to move it up 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; position: relative; z-index: 1; } .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

Related questions

0 votes
    [reposting deleted question with more detail] I've searched for an answer to this but not found a reference ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 11, 2022 in Education by JackTerrance
0 votes
    [reposting deleted question with more detail] I've searched for an answer to this but not found a reference ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 10, 2022 in Education by JackTerrance
0 votes
    How can I apply my div position x value to a variable? And how to iterate it in a for loop? ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 20, 2022 in Education by JackTerrance
0 votes
    I Know I can do this with static HTML, but I want to create dynamically, and I am struggling a ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 12, 2022 in Education by JackTerrance
0 votes
    Here is my JSFiddle Preview is shown in div box. I want to add close option on right top. How ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 10, 2022 in Education by JackTerrance
0 votes
    I Know I can do this with static HTML, but I want to create dynamically, and I am struggling a ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 8, 2022 in Education by JackTerrance
0 votes
    The repro code is attached. It (basically) contains two div elements: red (fixed) and black (with ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 16, 2022 in Education by JackTerrance
0 votes
    I am trying to create an app using AngularJS that takes a user's location (from their mobile) and ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 19, 2022 in Education by JackTerrance
0 votes
    I am trying to create an app using AngularJS that takes a user's location (from their mobile) and ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 12, 2022 in Education by JackTerrance
0 votes
    I mean this Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/ HTML: Fecha de inicio Fecha de ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 10, 2022 in Education by JackTerrance
0 votes
    I just added a textarea to my page which is an "include" to another page...I have some script ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 23, 2022 in Education by JackTerrance
0 votes
    I just added a textarea to my page which is an "include" to another page...I have some script ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 23, 2022 in Education by JackTerrance
0 votes
    I wanted to show a loading icon to users until the page elements are fully loaded. How can I do ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 10, 2022 in Education by JackTerrance
0 votes
    I have a landing page with sticky header. When user start scroll and the page displays .second-section . ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 26, 2022 in Education by JackTerrance
0 votes
    I have the access to this DOM node in temp1.$el. And here is the content which the above variable ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 26, 2022 in Education by JackTerrance
...