I'm working on a CSS Collapsible menu that I created from the tutorial here.
I have a container div that has a button (accordion), that when active, displays content (panel div).
When the button is active, I want to put a border around the container div.
Is there a way I can set .container to active when the child (accordion) is active, so I can target it? Or is there an easier way in CSS?
Any advice anyone has is appreciated. I just can't seem to make it work :(
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.container:hover {
border: 1px solid #ededed;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="container">
<button class="accordion">Button text</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
Create a .container.active class, and toggle it from the JS with this.parentNode.classList.toggle('active');.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.parentNode.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.container:hover {
border: 1px solid #ededed;
}
.container.active {
border: 1px solid black;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="container">
<button class="accordion">Button text</button>
<div class="panel">
<p>Test 3</p>
</div>
</div>
<div class="container">
<button class="accordion">Button text</button>
<div class="panel">
<p>Test 2</p>
</div>
</div>
<div class="container">
<button class="accordion">Button text</button>
<div class="panel">
<p>Test 3</p>
</div>
</div>
Add this line to the listener
document.getElementsByClassName("container")
.classList.toggle("active");
And add these css rule
.container {
border: 0px solid white;
}
.container.active {
border: 1px solid black;
}
Related
I am fairly new to HTML and CSS and am trying to align the navigation elements for my slideshow horizontally in a div. I have tried the solutions found here, but am not having any luck with my issue. With my current code, the circle elements are not center aligned with the < > arrows on either side. I think this is a simple fix, I'm just not sure where I'm going wrong in my code. Any help/explanations would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
.mySlides {
display: none;
padding: 5px 20px 5px 20px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
width: auto;
color: #888;
font-weight: bold;
font-size: 20px;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
.prev:hover, .next:hover {
background-color: #717171;
}
.dot-container {
text-align: center;
background: #ddd;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
margin-bottom: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<h1>Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="dot-container">
<span class="prev" onclick="plusSlides(-1)">❮</span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="next" onclick="plusSlides(1)">❯</span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
Use flexbox to align the items vertically in combination with line-height (set this the same as the height of the dots) and padding on the container (optional, to make it look nicer).
.dot-container {
text-align: center;
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 5px;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.prev, .next {
cursor: pointer;
width: auto;
color: #888;
font-weight: bold;
font-size: 20px;
user-select: none;
line-height: 20px;
}
You can vertical align with flex box for example.
This two classes i change:
.dot-container {
height:40px;
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
.mySlides {
display: none;
padding: 5px 20px 5px 20px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
width: auto;
color: #888;
font-weight: bold;
font-size: 20px;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
.prev:hover, .next:hover {
background-color: #717171;
}
.dot-container {
height:40px;
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
<div class="slideshow-container">
<div class="mySlides">
<h1>Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="dot-container">
<span class="prev" onclick="plusSlides(-1)">❮</span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="next" onclick="plusSlides(1)">❯</span>
</div>
I'm trying to recreate this toggle in CSS/HTML and JavaScript. When closed the toggle shows the title: 'Stap 2 Implementatie in de organisatie' and an icon (circle with a plus in it).
When open, it shows some text, and beneath it a section with downloadable tools, they could be implemented as images next to each other, but it's probably more versatile if it's the icon and text separated.
I've managed to create the title, the text underneath it, I just need help with:
Different icon for closed and open toggle
Extra green section in toggle
How to have 20px border radius on button, but only keep the top left and right border radius when clicked/open. (see extra screenshot)
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight:600;
font-family:'Dosis';
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.icon {
float:right;
}
.header {
color:#45b072;
}
.active, .accordion:hover {
background-color: #7d206a;
}
p {
color:#fff;
font-family:'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
You can try it like this, I have explained the changes in comments.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-radius: 20px; /* You can have border-radius on all sides */
}
.accordion.active {
border-bottom-left-radius: 0px; /* You can set the border-radius of bottom part to 0 */
border-bottom-right-radius: 0px;
}
.icon {
float: right;
height: 30px; /* Define height and width for the icon */
width: 30px;
background-image: url("https://i.stack.imgur.com/Vvuj2.png"); /* Image for the closed panel */
}
.active .icon {
/* Icon for the active panel */
background-image: url("https://i.stack.imgur.com/ZAR5V.png");
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.green-content { /* Properties for the new content */
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four columns for your content as per image */
background: #45b072;
margin: 0 -18px; /* Negative margin so that the parent padding doesn't affect it */
margin-top: 10px;
padding: 18px; /* Same padding as parent */
color: white;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon"></span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="green-content">
<!-- Extra content added -->
<div class="column-1">
Content
</div>
<div class="column-2">
Content
</div>
<div class="column-3">
Content
</div>
<div class="column-4">
Content
</div>
</div>
</div>
There are probably a lot of takes for this opinion but I think you should ditch the panel.style.dipslay and use class approach instead. So the gist of it is that you add an open state class to the wrapper and based on that you do stuff. I have set it up a bit for you so you can use the class accordion-container--is-open to do stuff with your css when the accordion is open
var accordions = document.querySelectorAll(".accordion-container");
accordions.forEach(element => {
const toggler = element.querySelector('.accordion')
toggler.addEventListener('click', function() {
element.classList.toggle('accordion-container--is-open')
})
})
.accordion {
display: flex;
align-items: center;
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
margin-left: auto;
}
.accordion-container--is-open .icon {
color: aqua;
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.panel > * {
padding: 0 18px;
}
.accordion-container--is-open .panel {
display: block;
}
.accordion__footer {
display: flex;
align-items: center;
height: 4rem;
background-color: lime;
}
.accordion__footer-icon {
width: 2rem;
height: 2rem;
background-color: aqua;
}
<h2>Accordion</h2>
<div class="accordion-container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="accordion__footer">
<span class="accordion__footer-icon">1</span>
<span class="accordion__footer-icon">2</span>
<span class="accordion__footer-icon">3</span>
</div>
</div>
</div>
Have a play with this
I use delegation and content. You can change content for background image
const container = document.getElementById("container");
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("icon")) {
const button = tgt.closest("button");
tgt.classList.toggle("open");
const close = !tgt.classList.contains("open");
tgt.classList.toggle("close",close);
const panel = button.nextElementSibling;
panel.classList.toggle("hide",!close)
}
})
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
float: right;
display: inline-block;
width: 50px;
}
.icon.open::after {
content: "⭕"
}
.icon.close::after {
content: "❌"
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.hide { display: none;}
<h2>Accordion</h2>
<div id="container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon open"></span></button>
<div class="panel hide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
I'm trying to include accordion list from here to a simple website but I'm having problem with jquery - javascript requires jquery 2.2.4, but the site already has jquery-1.11.2.min. Adding proper jquery version with no conflict mode doesn't make javascript work:
<script type="text/javascript">
var jQuery_2_2_4 = $.noConflict(true);
</script>
Also, adding no conflict mode to jquery 1_11_2 crashes website.
The code doesn't work on the website (pol - built co uk) but it works here perfectly even on jquery 1.11.2... Including another jquery-1.12.1.min.js in body doesn't help.
What should I do to make it work fine without crashing the site? (I'm not its owner or webmaster) Is there an easy way to simplify javascript below to work without jquery? I tried closure compiler but it was useless.
$('.accordion-item .heading').on('click', function(e) {
e.preventDefault();
// Add the correct active class
if($(this).closest('.accordion-item').hasClass('active')) {
// Remove active classes
$('.accordion-item').removeClass('active');
} else {
// Remove active classes
$('.accordion-item').removeClass('active');
// Add the active class
$(this).closest('.accordion-item').addClass('active');
}
// Show the content
var $content = $(this).next();
$content.slideToggle(100);
$('.accordion-item .content').not($content).slideUp('fast');
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
padding-top: 50px;
font: 14px Tahoma, Arial, Helvetica, sans-serif;
background-color: black;
width: 690px;
border-color: #a10900;
border-width: 50px;
border-style: solid;
}
.header {
text-align: center;
}
.header a {
text-decoration: none;
color: #f9f9f9;
}
.accordion {
width: 100%;
max-width: 75rem;
margin: 0 auto;
padding: 2rem;
}
.accordion-item {
position: relative;
}
.accordion-item.active .heading {
color: white;
}
.accordion-item.active .icon {
background: #a10900;
}
.accordion-item.active .icon:before {
background: white;
}
.accordion-item.active .icon:after {
width: 0;
}
.accordion-item .heading {
display: block;
text-transform: uppercase;
text-decoration: none;
color: lightgrey;
font-weight: 700;
font-size: 1rem;
position: relative;
padding: 1.5rem 1.5rem 1.5rem 4rem;
transition: 0.3s ease-in-out;
}
#media (min-width: 40rem) {
.accordion-item .heading {
font-size: 1.2rem;
}
}
.accordion-item .heading:hover {
color: white;
}
.accordion-item .heading:hover .icon:before, .accordion-item .heading:hover .icon:after {
background: white;
}
.accordion-item .icon {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 3rem;
height: 3rem;
border: 2px solid #a10900;
border-radius: 3px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.accordion-item .icon:before, .accordion-item .icon:after {
content: '';
width: 1.25rem;
height: 0.25rem;
background: lightgrey;
position: absolute;
border-radius: 3px;
left: 50%;
top: 50%;
transition: 0.3s ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.accordion-item .icon:after {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
z-index: -1;
}
.accordion-item .content {
display: none;
color: #f9f9f9;
}
.accordion-item .content p {
margin-top: 0;
}
#media (min-width: 40rem) {
.accordion-item .content {
line-height: 1.75;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<a href="#" class="heading">
<div class="icon"></div>
<div class="title"> <span style="color:#a10900">Accordion item 1</div>
</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
So basically I have a website and I have the layout in a way I want it to and I need to make a side navbar that slides open while dimming the rest of the page. but when I put my code together it only dims certain parts of my website instead of the whole thing. what am I doing wrong?
So basically I have a website and I have the layout in a way I want it to and I need to make a side navbar that slides open while dimming the rest of the page. but when I put my code together it only dims certain page of my website instead of the whole thing. what am I doing wrong?
here is the website https://thimbleprojects.org/wjtw9802/678158
HTML
<html>
<div id="myDiv">
<div id="main">
<body id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h1>My Website</h1>
<p style="text-align: right;">Resize the browser window to see the effect.</p>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="row">
<div class="leftcolumn">
<div class="card" id="myDiv">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</div>
</div>
</html>
CSS
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #ffffff;
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.leftcolumn {
float: right;
width: 100%;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: #d7cec7;
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JAVASCRIPT
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("myDiv").style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("myDiv").style.backgroundColor = "white";
}
The main issue is that you are solely affecting the background color of the main body tag on which are overlaid all you're other components.
The best way to proceed would be to add another div outside of your main div. Let's call it overlay that container will sit on top of all the other ones giving you the dim effect.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("overlay").style.display = "block";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("overlay").style.display = "none";
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #ffffff;
}
#overlay {
margin-left:250px;
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.leftcolumn {
float: right;
width: 100%;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: #d7cec7;
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JAVASCRIPT
<html>
<div id="myDiv">
<div id="overlay"></div>
<div id="main">
<body id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h1>My Website</h1>
<p style="text-align: right;">Resize the browser window to see the effect.</p>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="row">
<div class="leftcolumn">
<div class="card" id="myDiv">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</div>
</div>
</html>
I am trying to embedded accordion within another accordion however it's not working, the embedded accordion will expand only to the size of the first expand accordion, I will need to add extra space in order to show the content, any help is greatly appreciated!
CSS
button.accordion {
background-color: #73560b;
border: 2px solid #ffc600;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #926c0e;
}
button.accordion:after {
content: '\002B';
color: #ffc600;
font-weight: bold;
float: right;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
HTML
<button class="accordion">Background</button>
<div class="panel">
content
<button class="accordion">item 1</button>
<div class="panel">
content
</div>
</div>
JavaScript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>
content
</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
try this