set Display property None In Javascript - javascript

I want to set display property none with on click event. If I am using querySelectorAll then it's applyng on all if I click on first button and other buttons are not working. I am New to JavaScript Here is my code.
let div = document.querySelector('.cross')
div.addEventListener('click',closeDiv);
function closeDiv() {
let closeBy = document.querySelectorAll('div');
closeBy.forEach(element => {
element.classList.add('display')
});
}
div{
border: 1px solid green;
margin: 5px;
text-align: center;
padding: 10px
}
.cross {
border: 1px solid red;
border-radius: 5px;
position: absolute;
right: 27px;
background-color: red;
color: white;
cursor: pointer;
}
.cross:hover {
background-color: greenyellow;
border: 1px solid greenyellow;
color: red;
}
.display{
display: none;
}
<div>
<button class="cross">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div>
<button class="cross">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p></div>
<div>


solution for clicking a div and its parent div will hide
Step 1: add function closeDiv() to every div which are responsible to closing div
<div>
<button class="cross" onClick="closeDiv(event)">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div>
<button class="cross" onClick="closeDiv(event)">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div> // This line is incorrect in your code
Step 2: add functional things in side closeDiv function
function closeDiv(event) {
let wrapperDiv = event.target.parentNode
wrapperDiv.style.display = "none"
}
Check the full code here
Hope this helps and feel free to comment below if this answer is not enough to you.


I just changed the javascript code
let cross = document.querySelectorAll('.cross')
cross.forEach(function(element) {
element.addEventListener('click', function(event) {
this.parentElement.style.display = 'none' // get parent
})
})
Eu quero definir nenhuma propriedade de exibição no evento click. Se eu estiver usando o querySelectorAll, será aplicado a todos se clicar no primeiro botão e outros botões não estiverem funcionando. Eu sou novo no JavaScript Aqui está o meu código.
let div = document.querySelector('.cross')
div.addEventListener('click',closeDiv);
function closeDiv() {
let closeBy = document.querySelectorAll('div');
closeBy.forEach(element => {
element.classList.add('display')
});
}
div{
border: 1px solid green;
margin: 5px;
text-align: center;
padding: 10px
}
.cross {
border: 1px solid red;
border-radius: 5px;
position: absolute;
right: 27px;
background-color: red;
color: white;
cursor: pointer;
}
.cross:hover {
background-color: greenyellow;
border: 1px solid greenyellow;
color: red;
}
.display{
display: none;
}
<div>
<button class="cross">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div>
<button class="cross">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p></div>
<div>
Use parentElement to get the parent element


I'd use dataset attributes so each button knows what it closes.
In current example you could target parent object, but I prefer using dataset attributes because this can be applied even if close button gets nested deeper and div isn't direct parent anymore
let div = document.querySelectorAll('.cross')
div.forEach(element => {
element.addEventListener('click',closeDiv);
});
function closeDiv() {
let parentMessageId = this.dataset.parentmessage;
let closeBy = document.querySelectorAll('[data-message="'+parentMessageId+'"]');
closeBy.forEach(element => {
element.classList.add('display-hidden')
});
}
div{
border: 1px solid green;
margin: 5px;
text-align: center;
padding: 10px
}
.cross {
border: 1px solid red;
border-radius: 5px;
position: absolute;
right: 27px;
background-color: red;
color: white;
cursor: pointer;
}
.cross:hover {
background-color: greenyellow;
border: 1px solid greenyellow;
color: red;
}
.display-hidden{
display: none;
}
<div data-message="1">
<button data-parentmessage="1" class="cross">X</button>
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>
<div data-message="2">
<button data-parentmessage="2" class="cross">X</button>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam atque dignissimos, delectus facere vero quia, similique voluptatem adipisci nobis iusto suscipit. Consequuntur officia earum iure! Consequatur iusto soluta ut alias atque blanditiis, optio maiores ullam, cum quibusdam, adipisci hic ducimus sed nam quas. </p>
</div>

Related

HTML JS Problem with Collapse and Expand All text

I'm having trouble with 'Collapse' and 'Expand All' functionality:
The 'Expand All' button isn't working. How do I fix this code?
When I do Collapse each item individually the red and purple boxes (around them) do not expand accordingly (if the text exceeds the pre-set height). The Collapse items also spill over and go all the way down the page and over the footer. How do I get the red and purple box to expand with the text IF the max length of the text goes further down past the end of their height?
//Expand All
function toggleAll() {
var buttons = Array.prototype.slice.call(document.querySelectorAll('.testingpol_extrainfo_column'));
buttons.forEach(function(button) {
//Swap each element between display 'none' and 'block'
if (window.toggleAll === 0) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
// Swap window.toggleAll between 0 and 1
window.toggleAll = window.toggleAll === 0 ? 1 : 0;
});
}
// Collapse Individual points
var coll = document.getElementsByClassName("testingpol_extrainfo_column");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** TESTING POLICY Information **/
.testingpol_extrainfo_outerbackground {
background-color: rgb(51, 20, 223);
height: 900px;
width: auto;
margin: 25px 0px 100px 0px;
padding: 20px 0px 0px 0px;
}
.testingpol-extrainfo-heading {
font-size: 42px;
text-align: center;
color: rgb(0, 0, 0);
padding: 0px;
margin: 50px 0px 0px 0px;
}
.testingpol_extrainfo_banner {
background-color: red;
height: 800px;
width: 1000px;
margin: 10px 0px 100px 250px;
border-radius: 3px;
}
.testingpol_extrainfo_column {
background-color: rgb(119, 119, 119);
color: white;
cursor: pointer;
padding: 18px;
margin: 0px 0px 0px 50px;
width: 900px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.testingpol_extrainfo_column:hover {
background-color: #555
}
.testingpol_extrainfo_content {
margin: 0px 0px 0px 50px;
padding: 0 18px;
width: 900px;
height: auto;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
/**** FOOTER ****/
.form-control-bottomstuff {
background-color: teal;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
}
.footer_bar {
background-color: black;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<section class="main_body">
<div class="testingpol_extrainfo_outerbackground">
<div class="testingpol_extrainfo_banner">
<div class="testingpol-extrainfo-heading ">Collapse Title</div>
<input type="button" value="Expand All" onclick="toggleAll();">
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
non?</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
<h6>Lorem</h6> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
vero harum facere.</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
</p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer_bar ">
<div>
Footer 2
</div>
</div>
</footer>
</body>
<script src="script.js"></script>
</html>

I rewrote all of your JS and added min-height and flexbox properties to your banner and outerbackground as flexbox will flex with the content. I reworked the JS with a .show class and toggled that class. Hope this is what you are looking for.
//Expand All
const expandAll = document.getElementById('expandAll');
expandAll.addEventListener('click', () => {
// const buttons = document.querySelectorAll('.testingpol_extrainfo_column');
const content = document.querySelectorAll(".testingpol_extrainfo_content");
for (let i=0; i < content.length; i++) {
content[i].classList.remove('show-individual');
content[i].classList.toggle('show');
}
});
// Collapse Individual points
const banner = document.querySelector('.testingpol_extrainfo_banner');
banner.addEventListener('click', (e) =>{
const col = document.querySelectorAll(".testingpol_extrainfo_column");
const content = document.querySelectorAll(".testingpol_extrainfo_content");
for (let i=0; i < col.length; i++){
if (e.target === col[i]){
content[i].classList.toggle('show-individual');
}
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** TESTING POLICY Information **/
.testingpol_extrainfo_outerbackground {
background-color: rgb(51, 20, 223);
min-height: 900px;
width: auto;
margin: 25px 0px 100px 0px;
padding: 20px 0px 0px 0px;
}
.testingpol-extrainfo-heading {
font-size: 42px;
text-align: center;
color: rgb(0, 0, 0);
padding: 0px;
margin: 50px 0px 0px 0px;
}
.testingpol_extrainfo_banner {
background-color: red;
min-height: 800px;
display: flex;
flex-direction: column;
/* align-items: flex-start; */
width: 1000px;
margin: 10px 0px 100px 250px;
border-radius: 3px;
}
input[id="expandAll"]{
align-self: flex-start;
}
.testingpol_extrainfo_column {
background-color: rgb(119, 119, 119);
color: white;
cursor: pointer;
padding: 18px;
margin: 0px 0px 0px 50px;
width: 900px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.testingpol_extrainfo_column:hover {
background-color: #555
}
.testingpol_extrainfo_content {
margin: 0px 0px 0px 50px;
padding: 0 18px;
width: 900px;
height: auto;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.show {
display: block;
}
.show-individual {
display: block; }
/**** FOOTER ****/
.form-control-bottomstuff {
background-color: teal;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
}
.footer_bar {
background-color: black;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
color: white;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<section class="main_body">
<div class="testingpol_extrainfo_outerbackground">
<div class="testingpol_extrainfo_banner">
<div class="testingpol-extrainfo-heading ">Collapse Title</div>
<input id="expandAll" type="button" value="Expand All" >
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
non?</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
<h6>Lorem</h6> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
vero harum facere.</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
</p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer_bar ">
<div>
Footer 2
</div>
</div>
</footer>
</body>
<script src="script.js"></script>

How to slid left/right two divs using jquery?

I am new to coding and I am trying to achieve the following using JQuery:
I have two Divs Where clicking on the first shows some content and clicking the second would hide the content of the first one and show its content instead (Toggling). What I want to do is that I want to keep the same functionality but I want the second Div to slide to the right when I click on the first Div and make a drawer shape and vice versa. I have attached images to it so it may explain more about my idea.
both of contents are hidden by default.
I can't seem to know how to join these two functionalities together
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="box-container">
<div id="div1">
<h1>Title one</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
<div id="div2">
<h1>Title two</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore
quidem ex tenetur ipsum dolore repudiandae molestiae mollitia! Dolore
numquam.
</p>
</div>
</div>
<div id="contentDiv1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
<div id="contentDiv2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptatem
veritatis assumenda. Obcaecati veniam quo impedit tempora pariatur maiores
ipsa voluptates commodi esse eveniet! Nihil corrupti illum at accusantium
sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veritatis
et molestias? Reprehenderit distinctio sint provident ratione dolorem
veritatis sapiente, fuga amet obcaecati. Laboriosam rerum consectetur nemo
magnam saepe mollitia. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Excepturi sit perferendis earum debitis corrupti dolore commodi
minima consectetur veniam itaque inventore et pariatur sapiente, maxime
quis, in nulla, eos molestias! Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Quasi, incidunt repudiandae perferendis ea praesentium
blanditiis, voluptate accusantium, repellat molestiae quisquam eveniet
earum officia sed assumenda maxime officiis sequi laboriosam! Tempore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias modi hic
officia iste optio in delectus veniam obcaecati reprehenderit, voluptate
ipsum! Incidunt ducimus animi, id quae blanditiis provident dignissimos
harum?
</div>
</body>
</html>
CSS
body {
display: inline-block;
margin: 100px 100px 25px 100px;
text-align: center;
}
#box-container {
height: 300px;
display: flex;
}
#div1 {
background: linear-gradient(90deg, #f57350, #fa8282);
width: 50%;
height: 50%;
cursor: pointer;
}
#div2 {
background: linear-gradient(90deg, #a42e5a, #f57350);
width: 50%;
height: 50%;
cursor: pointer;
}
#contentDiv1,
#contetnDiv2 {
margin: 25px;
}
JQuery
jQuery(document).ready(function($){
$('#contentDiv1').hide();
$('#contentDiv2').hide();
$('#div1').on('click', function(){
$('#contentDiv1').slideToggle();
$('#contentDiv2').hide();
});
$('#div2').on('click', function(){
$('#contentDiv2').slideToggle();
$('#contentDiv1').hide();
});
});
attached image

It has more than one solution, and for me, this is my favorite method, I hope it helps you:
$('.tabs .tab').on('click', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active')
.closest('.tabs').removeClass('active1 active2');
$('.content').hide();
} else {
let i = $(this).index() + 1;
$(this)
.addClass('active')
.siblings('.tab').removeClass('active')
.closest('.tabs').removeClass('active1 active2')
.addClass('active' + i);
$('.content').hide();
$('.content' + i).fadeIn();
}
});
.tabs,
.tabs .tab,
.tabs .content {
border: 1px solid #000;
border-collapse: collapse;
box-sizing: border-box;
}
.tabs {
display: flex;
flex-wrap: wrap;
text-align: center;
position: relative;
}
.tabs.active1 {
padding-left: 0;
padding-right: 65px;
}
.tabs.active2 {
padding-left: 65px;
padding-right: 0;
}
.tabs .tab {
padding: 15px;
cursor: pointer;
min-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.tabs.active1 .tab,
.tabs.active2 .tab {
min-width: 100%;
width: 100%;
}
.tabs .content {
padding: 15px;
min-width: 100%;
display: none;
}
.tabs.active1 .tab1:not(.active),
.tabs.active2 .tab1:not(.active){
position: absolute;
left: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
.tabs.active1 .tab2:not(.active),
.tabs.active2 .tab2:not(.active) {
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-width: 65px;
width: 65px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
<div class="tab tab1">div1</div>
<div class="tab tab2">div2</div>
<div class="content content1">div content1</div>
<div class="content content2">div content2</div>
</div>

Hardcode element position in CSS for non-JavaScript-users

I have a HTML-Document which is structured as shown in the following figure:
The red blocks which represent the text of the sidenotes are placed relatively to the footnote numbers in the text using CSS. If the text has many sidenotes and/or the texts of the sidenotes are long, the sidenotes overlap. To prevent such a behaviour I am using JavaScript to set the top margin of these elements in order to shift them downwards.
To prevent that the website is not usable without JavaScript enabled, I would like to hardcode the top margin value of the elements that need shifting down in the CSS-file. To take into account the different screen resolutions, I thought of using the CSS #media-query to set different top margins for other screen resolutions.
Example:
#media(min-width: 80em) {
.container { width: 40em; }
#sidenote-45 { margin-top: 15px; }
[...]
}
#media(min-width: 60em) {
.container { width: 30em; }
#sidenote-56 { margin-top: 28px; }
#sidenote-89 { margin-top: 12px; }
[...]
}
[maybe more #media-queries for other screen sizes]
What do you think about this approach?

You can use absolute position relative to the container to place the notes at the left or right of the div and if you don't set top property the box maintains in its position aligned with the number. Something like this:
.container {
border: solid 2px black;
background: white;
width: 30%;
margin: 20px auto;
position: relative;
}
sup {
color: red;
}
.notes {
position: absolute;
left: -220px;
color: black;
display: block;
background: #8ac88a;
width: 200px;
font-size: 14px;
padding: 5px;
margin-top: -10px;
}
.right {
left: auto;
right: -220px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolorum voluptate provident doloremque aperiam laboriosam ea, vel nihil illum, beatae nemo mollitia possimus, velit<sup>1<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> sapiente nobis! Expedita possimus incidunt nam laudantium corrupti eaque, eveniet fuga perferendis, enim praesentium vero voluptatibus adipisci, dicta blanditiis aliquid asperiores accusantium. Provident voluptate explicabo necessitatibus eos sequi
modi non in nesciunt, debitis alias architecto doloremque sed<sup>2<span class="notes right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> quam voluptatem aut dolorem officia ipsa eum dicta optio delectus ullam
aliquam! Dicta rerum praesentium, laudantium suscipit earum, voluptates placeat totam aperiam non atque consequatur cupiditate neque! Reiciendis consectetur quo, alias facilis officia totam illo minus? Vitae distinctio culpa nesciunt voluptate tempore!
Error enim aperiam odio debitis culpa excepturi, minus molestias inventore amet recusandae<sup>3<span class="notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, et!</span></sup> fugit sit quasi qui ipsum. Aperiam quaerat tenetur,
voluptatibus eaque. Voluptatum veniam, nihil accusamus nesciunt nobis dolore cumque amet asperiores qui, ducimus iusto voluptatibus.

Buttons width to fill up window width

The App will start with 2 buttons in the footer initially.
Depending on user interaction with the app, a third button may need to be inserted/shown. And later it may need to be hidden/removed depending on some user selections form other parts of the app.
Button text is to be centred horizontally inside each button and the footer will need to be fully covered by the buttons except the tiny vertical division for spacing.
The footer in my code has an undesired blank space on the right.
What is the best way to solve this?, hopefully with as much css as possible and the rest with javaScript "I a guessing". Thanks
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>

Is this what your looking for?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
footer > button {
display: inline-block;
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>

If you mean that you want all three buttons to take up the same space then this will work for you:
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}

How do i darken the whole page? ( html )

When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.
Is there a way to overlap the whole document with a gray transparent plane?

There is a codepen ilustrating your needs. (creating a dismissable popup and dimming the view)
HTML:
<div class="wrapper">
<button class="btn btn-success dim">Dim the page!</button>
<div class="dimmer">
<span class="exit">×</span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
</div>
</div>
CSS:
.wrapper {
padding: 2.5em;
margin: 0 auto;
width: 80%;
}
.dimmer {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.dim {
display: block;
margin: 2em auto;
z-index: 200;
}
.exit {
font-size: 100px;
color: red;
position: absolute;
top: 2px;
left: 2px;
opacity: 1;
cursor: pointer;
}
Javascript:
$(function() {
var dimmerButton = $('.dim');
var dimmer = $('.dimmer');
var exit = $('.exit');
dimmerButton.on('click', function() {
dimmer.show();
});
exit.on('click', function() {
dimmer.hide();
});
});
Note: The author of this is #srikarg

You will need to show an overlay div
<div id="overlay"></div>
Make it position fixed
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
and make it visible when you want to darken the page, here is how you do it
$(function(){
//Am hiding the overlay after 2 sec
$("#overlay").delay(3000).hide(200);
})
#overlay {
background-color: rgba(0,0,0,0.5);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="overlay"></div>
<h1>My Awesome Page</h1>
</body>

You can add a background-color to your body with css:
#overlay {
background-color: rgba(0,0,0,0.5); /* your color */
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
Demo: http://jsfiddle.net/6gahqaej/2

Categories

Resources