Develop Reference

script for changing display makes div not exist

I'm taking an engineering class and right now we're learning html. I've been instructed to type the following script to switch the display property of the div from none to flex and vice versa. However, for some reason the script makes the div not exist at all.
function toggle() {
var x = document.getElementById("myDIV");
if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
}
.btn {
background: none;
opacity: 1;
border-radius: 10px;
border: 2px solid white;
cursor: pointer;
color: white;
font-family: Helvetica;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 10px 5px 10px;
}
.alignV {
position: relative;
top: 50%;
transform: translateY(-50%);
align-items: center;
justify-content: center;
}
.btn-space {
background: none;
opacity: 0;
width: 50px;
}
.btn:hover,
.btn:focus {
background-color: yellow;
color: black;
}
#myDIV {
/*where the display property is*/
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
padding: 1%;
/*background-color: lightblue;*/
visibility: hidden;
flex-direction: row;
font-family: Helvetica;
display: none;
}
.myDIVbox {
position: relative;
left: 0;
/*border: 2px solid red;*/
width: 60%;
height: 50%;
padding-bottom: 30px;
padding-top: 30px;
display: inline-flex;
flex-direction: row;
font-family: Helvetica;
color: white;
background: black;
opacity: 60%;
padding-left: 30px;
padding-right: 30px;
}
<div class="LandingBar">
<button class="btn alignV">button 1</button>
<button class="btn-space alignV"></button>
<button class="btn alignV">button 2</button>
<button class="btn-space alignV"></button>
<button class="btn alignV" onclick="toggle()">Button 3</button>
<!-- the button -->
</div>
<div id="myDIV">
<!--the div that has the display property being changed-->
<div class="myDIVbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan in nisl nisi scelerisque. Facilisis sed odio morbi quis commodo odio. Urna molestie at elementum eu facilisis. Sem fringilla
ut morbi tincidunt. Donec et odio pellentesque diam volutpat. Habitant morbi tristique senectus et netus. Turpis cursus in hac habitasse platea dictumst quisque sagittis.<br>
<br> Dictumst quisque sagittis purus sit amet volutpat. Pulvinar neque laoreet suspendisse interdum consectetur. Eu augue ut lectus arcu bibendum at varius. Nibh tortor id aliquet lectus proin. Duis at consectetur lorem donec. Porttitor leo a diam
sollicitudin. Aliquam nulla facilisi cras fermentum odio eu. Mi tempus imperdiet nulla malesuada. Molestie ac feugiat sed lectus vestibulum mattis. Elementum curabitur vitae nunc sed velit. Egestas integer eget aliquet nibh. Lacinia quis vel eros
donec.<br>
<br> Ultrices dui sapien eget mi. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Non tellus orci ac auctor augue mauris. Ornare massa eget egestas
purus viverra accumsan in nisl nisi. Ut enim blandit volutpat maecenas volutpat.<br>
<button class="btn">Lorem Ipsum</button>
</div>
</div>
What's supposed to happen is a bar is drawn at the top of the page with three buttons, and clicking the third makes the div appear by changing the display property from none to flex, however what actually happens is that the bar is draw with the buttons but the button doesn't make the div appear. I've tried changing the display on the div to flex myself in the css so it should start visible, but it still doesn't appear. I've also tried asking my teacher, who was of little help. I unfortunately can't use developer tools in my browser to check what's actually going on since it's disabled on the school computers.

The problem is visibility: hidden; on #myDIV. Even when you set the display property to something other than none, visibility: hidden; is still preventing it from appearing.

Modify CSS of main content when a side panel slides in

When the right panel is expanded, I want to fade out the content of the page and add css position to the background to make it slide to the left, is it possible? I can't modify the content when the panel is expanded because it doesn't receive an active class. Tried an "add class" in the JS for the content but didn't work.
https://codepen.io/darcyvoutt/pen/rhtfk
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84D5C5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1, h2, h3 { margin-bottom: 0.5em; }
ul { margin: 30px 40px; }
li { margin: 5px 0; }
////////////////////////
// Mixins
////////////////////////
.transition(#property) {
-webkit-transition: #property;
transition: #property;
}
.boxStyle() {
background: #ffffff;
padding: 50px;
}
.panels() {
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
}
.panelClose() {
#size: 15px;
#margin: 5px;
line-height: #size;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: #margin;
top: #margin;
height: #size;
width: #size;
content: "✖";
}
////////////////////////
// Panels & Reveal
////////////////////////
.panel {
#transition: all 1.5s ease-in-out;
padding: 20px;
&-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
.close {
.panelClose();
&:before { .panelClose(); }
}
}
&-left {
.panels();
.transition(#transition);
left: -100%;
width: 45%;
&.expanded { left: 50px; }
}
&-right {
.panels();
.transition(#transition);
right: -100%;
width: 50%;
&.expanded { right: 0; }
}
}
.reveal {
&-left {
float: left;
}
&-right {
float: right;
}
}
////////////////////////
// Layout
////////////////////////
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
button {
padding: 4px 6px;
}
a {
font-weight: bold;
color: #222;
}
}
.content {
.boxStyle();
margin: 50px auto;
position: relative;
width: 90%;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
JS
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) { $(panel).removeClass('expanded'); }
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) { $('.panel-left').addClass('expanded'); }
if (e.keyCode == 82) { $('.panel-right').addClass('expanded'); }
});
});

You can add a class on the expand/close of the right panel that will:
fade the main content by changing the opacity CSS from 1 to 0.3 (for example)
move it to the right using the right from 0 to 50% (to match your right panel)
The transition rule in the .content CSS will animate the change.
(You only mention the right panel in your question, but it can be adapted for the left panel also).
See the working snippet:
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
$(".content").addClass('hidefor-'+panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
}
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-right').addClass('expanded');
$(".content").addClass('hidefor-panel-right');
}
});
});
.content {
background: #ffffff;
padding: 50px;
margin: 50px auto;
position: relative;
width: 90%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity:1;
right:0;
}
.content.hidefor-panel-right {
opacity:0.3;
right: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84d5c5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-right {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
right: -100%;
width: 50%;
}
.panel-right.expanded {
right: 0;
}
.reveal-left {
float: left;
}
.reveal-right {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>

CSS Modal Popup with optional JavaScript

How to create a CSS based modal popup with optional JavaScript? The solution should be mostly CSS based. I looked at some of the CSS only solutions, and they change the page URL. This question is intended to provide alternatives. For example, it's possible to create a CSS based modal popup with the :active and :focus selectors. It's also necessary to use the object tag for nesting anchors. A solution is posted below.

This solution works by using the :active, :focus css selectors to show the modal. To hide the modal, focus is transferred to a different anchor from the one which triggered it. object tag is used to nest anchors. JavaScript is optional, but preferred, for best operation.
document.addEventListener('DOMContentLoaded', e => Array.prototype.forEach.call(document.getElementsByClassName('no-drag'), l => l.addEventListener('dragstart', e => e.preventDefault())))
body {
background: #dfd;
}
.btn {
display: inline-block;
box-sizing: border-box;
margin: .2em;
border: .2em solid;
border-radius: .6em;
padding: .3em;
text-align: center;
text-decoration: none;
font-family: 'MS Shell Dlg 2', Arial;
cursor: pointer;
}
.btn-green {
border-color: #9b9;
background-color: #686;
color: #bdb;
}
.btn-green:hover {
border-color: #9cb;
background-color: #698;
color: #bed;
}
.modal-container {
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .8);
z-index: 1;
cursor: default;
-webkit-transition: visibility .5s;
transition: visibility .5s;
}
.modal {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
border: .2em solid #9b9;
border-radius: .6em;
background-color: rgba(102, 136, 102, .8);
font-size: 1rem;
line-height: 1em;
overflow: hidden;
-webkit-transition: top .5s, right .5s, bottom .5s, left .5s;
transition: top .5s, right .5s, bottom .5s, left .5s;
}
.modal-header, .modal-footer {
position: absolute;
right: 1em;
left: 1em;
height: 2em;
border-radius: .3em;
background-color: rgba(102, 136, 102, .8);
padding: 0 .2em;
overflow: hidden;
}
.modal-header {
top: 1em;
}
.modal-footer {
bottom: 1em;
}
.modal-text, .modal-btn {
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: .2em;
color: #bdb;
}
.modal-text {
left: 0;
padding: .1em .3em;
line-height: 1.2em;
}
.modal-btn {
right: 0;
border-radius: .6em;
padding: .1em .6em;
background-color: rgba(85, 119, 85, .8);
line-height: 1.3em;
text-decoration: none;
}
.modal-btn:hover, .modal-btn:active, .modal-btn:focus {
background-color: rgba(119, 153, 136, .8);
color: #ced;
}
.modal-body {
position: absolute;
top: 4em;
right: 1em;
bottom: 4em;
left: 1em;
margin-right: .5em;
padding: 0 .5em;
text-align: justify;
overflow: auto;
}
.modal-body:after {
content: "";
display: block;
height: .5em;
}
.modal-show:active > .modal-container, .modal-show:focus > .modal-container {
visibility: visible;
}
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#media (min-width: 320px) {
/* Extra Extra Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#media (min-width: 480px) {
/* Extra Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#media (min-width: 576px) {
/* Small */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: .5em;
right: .5em;
bottom: .5em;
left: .5em;
}
}
#media (min-width: 768px) {
/* Medium */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 1.5em;
right: 1.5em;
bottom: 1.5em;
left: 1.5em;
}
}
#media (min-width: 992px) {
/* Large */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 3em;
right: 3em;
bottom: 3em;
left: 3em;
}
}
#media (min-width: 1200px) {
/* Extra Large */
.modal-show:active > .modal-container > .modal, .modal-show:focus > .modal-container > .modal {
top: 6em;
right: 6em;
bottom: 6em;
left: 6em;
}
}
<a class="btn btn-green modal-show no-drag" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false" draggable="false">
Modal
<div class="modal-container">
<div class="modal">
<object class="modal-header">
<div class="modal-text">Modal Dialog</div>
<a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">x</a>
</object>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ornare nisi, ac aliquam erat. Vestibulum rhoncus, ipsum vitae lobortis pellentesque, odio lorem convallis lorem, nec malesuada dolor magna vitae metus. Duis varius mi vel nunc lobortis blandit. Duis eu posuere tortor. Etiam ac arcu finibus, suscipit sem nec, pulvinar enim. Aliquam pellentesque arcu nec sem iaculis, vitae convallis purus imperdiet. Aenean et dolor a nulla placerat facilisis eget non arcu.
Duis venenatis nulla nec augue vulputate, vel dapibus dui accumsan. Curabitur quis purus vitae lectus cursus fermentum at vehicula turpis. Ut vel facilisis mauris. Duis accumsan, enim sed egestas elementum, orci mi mollis tellus, vel luctus tortor augue gravida est. Nulla at lorem sed elit facilisis interdum. Duis mattis non sapien at laoreet. Sed suscipit elit ut tellus laoreet, sit amet gravida nunc mollis. Nam ullamcorper est quis facilisis scelerisque. Duis nulla diam, blandit sed commodo quis, blandit id felis. Nam eleifend elit et orci aliquet gravida. Donec at commodo diam. Proin vehicula auctor gravida.
Vivamus finibus tempus lobortis. Integer convallis neque non ex placerat porta. Fusce a purus maximus, sollicitudin libero eu, vulputate nibh. Nullam pulvinar enim et purus tincidunt porta. Mauris diam enim, volutpat quis urna sed, rhoncus convallis ante. Vestibulum mollis metus eu dui elementum varius. Vestibulum sodales massa eget viverra malesuada. Vestibulum eget lacinia nunc.
Donec mattis lobortis lorem ac tempor. Donec iaculis, felis eu imperdiet accumsan, ex neque laoreet velit, vitae egestas felis diam vitae massa. Aenean maximus magna velit, vel mattis tortor dapibus sed. Cras vehicula fringilla nulla, eget mattis nibh. Quisque lacinia convallis massa, a consectetur nibh viverra id. Donec quis mauris vitae mi rhoncus lacinia. Ut metus felis, cursus et risus at, fringilla mattis dui. Vestibulum sollicitudin facilisis hendrerit. Morbi a risus nisl. Donec sed gravida turpis. Nulla hendrerit dui mollis dui accumsan, eget facilisis metus vestibulum. Sed vel molestie eros. Quisque ut felis purus. Donec nec bibendum quam, ac accumsan risus. Donec blandit eu ante sollicitudin rutrum. In vitae iaculis est, ac molestie nunc.
Nunc eu justo id dui ultricies facilisis quis eu tortor. Phasellus eget nulla quis elit fringilla maximus. Suspendisse tortor justo, tempor vel accumsan in, suscipit non leo. Pellentesque non gravida sapien. Sed vel ex vel dui tempor pellentesque a eget elit. Pellentesque gravida ligula quis mollis vestibulum. Quisque a nibh id nibh mollis tincidunt. Proin ex eros, sagittis a tellus vel, auctor rutrum arcu. Integer quam erat, congue non tellus vitae, fermentum suscipit metus. Cras quis mi id ante maximus cursus sit amet ac libero.
</div>
<object class="modal-footer">
<a class="modal-btn" href="#" onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false">Close</a>
</object>
</div>
</div>
</a>

There is a new HTML element called <dialog>. Its support is quite recent but there is a polyfill.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/dialog
Here is an example for you:
<dialog id="my-dialog">
<p>Hello from my dialog</p>
<button id="hide-button">Hide dialog</button>
</dialog>
<button id="show-button">Show dialog</button>
<script>
const showButton = document.querySelector('#show-button');
const hideButton = document.querySelector('#hide-button');
const dialog = document.querySelector('#my-dialog');
showButton.addEventListener('click', () => {
dialog.showModal();
});
hideButton.addEventListener('click', () => {
dialog.close();
});
</script>

Animating a toggleClass Display None/Block

I created a list and used CSS to make is so only the first three items are shown by default. When the user clicks a Read More link it will display the remaining items.
I'm trying to animate the part where the additional list items are loaded, but can't seem to figure out a way to do it.
I've tried various CSS and JS solutions but nothing has worked. Does anyone have an ideas on how to get this to work? Any help would be greatly appreciated!
Codepen: https://codepen.io/anon/pen/ZjEMoP
$(document).ready(function() {
$('#list-list #list-more').on('click', function(e) {
e.preventDefault();
$(this).closest('#list-list').toggleClass('open');
$('#list-more').hide();
$('#list-less').show();
});
$('#list-list #list-less').on('click', function(e) {
e.preventDefault();
$(this).closest('#list-list').toggleClass('open');
$('#list-less').hide();
$('#list-more').show();
});
});
body {
font-family: arial;
}
#list-list ul {
padding: 0 0 0 15px;
margin: 0 0 5px 0;
}
#list-list li {
line-height: 25px;
}
#list-list li:nth-child(n+4) {
display: none;
}
#list-list.open li:nth-child(n+4) {
display: list-item;
}
#list-more,
#list-less {
color: #00b8e4;
margin: 0 0 0 15px;
cursor: pointer;
}
#list-more:hover,
#list-less:hover {
color: #0084bf;
}
#list-less {
display: none;
}
#list-more:after {
content: "";
margin: 0 0 3px 5px;
display: inline-block;
border: 5px solid transparent;
border-top: 5px solid #000;
border-bottom: 0 none;
}
#list-less:after {
content: "";
margin: 0 0 3px 5px;
display: inline-block;
border: 5px solid transparent;
border-top: 0 none;
border-bottom: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list-list">
<ul>
<li>In hac habitasse platea dictumst. Morbi fini</li>
<li>l sagittis nulla. Donec tempor ex augue, eget convallis est vulputat</li>
<li>ies dui ut placerat. Quisque blandit ullamcorper sem, ut conseq</li>
<li>volutpat ultrices nunc. Nullam mattis velit eros, non rhoncus nibh laoreet varius.</li>
<li>ui ut placerat. Quisque blandit ullamcorper sem, ut consequat ante tristique id. Nam nisl ligula, rhoncus quis blandit vel, varius hendrerit libero. Nullam</li>
<li>s arcu a aliquam bibendum. In id odio odio. Ut ac gravida erat.</li>
<li>onvallis lectus fringilla non. Pellentesque velit elit, pellentesque at tincidunt pellentesque, bibendum nec sap</li>
<li>ulus mus. Nullam nec vehicula justo. Ut vel nibh vulputate ante tincid</li>
</ul>
<span id="list-more">Read More</span>
<span id="list-less">Read Less</span>
</div>

Have you tried using keyframes? This example will fade in the text.
https://codepen.io/anon/pen/vaYVmd
#list-list.open li:nth-child(n+4) {
display: list-item;
animation-name: fade-in;
animation-duration: 1s;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

You could just change your javascript to this:
$( document ).ready(function() {
$('#list-list #list-more').on('click', function(e) {
e.preventDefault();
$(this).closest('#list-list').toggleClass('open');
$('#list-list li:nth-child(n+4)').fadeIn();
$('#list-more').hide();
$('#list-less').show();
});
$('#list-list #list-less').on('click', function(e) {
e.preventDefault();
$(this).closest('#list-list').toggleClass('open');
$('#list-list li:nth-child(n+4)').fadeOut();
$('#list-less').hide();
$('#list-more').show();
});
});
You don't really need the open toggle anymore in that case either. If you wanted to do it with CSS animation it would be a bit trickier because animating between display none / block doesn't really work too well in my experience.

You can do it with animation property, some simple solution would be animating opacity, see the code below:
$( document ).ready(function() {
$('#list-list #list-more').on('click', function(e) {
e.preventDefault();
$(this).closest('#list-list').toggleClass('open');
$('#list-more').hide();
$('#list-less').show();
});
$('#list-list #list-less').on('click', function(e) {
e.preventDefault();
$(this).closest('#list-list').toggleClass('open');
$('#list-less').hide();
$('#list-more').show();
});
});
body {
font-family: arial;
}
#list-list ul {
padding: 0 0 0 15px;
margin: 0 0 5px 0;
}
#list-list li {
line-height: 25px;
}
#list-list li:nth-child(n+4) {
display: none;
}
#list-list.open li:nth-child(n+4) {
opacity: 0;
transform: translateY(-15px);
animation: displayList 500ms ease-in;
animation-fill-mode: forwards;
}
#keyframes displayList {
0% {
opacity :0;
transform: translateY(-5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#list-list.open li:nth-child(n+4) {
display: list-item;
}
#list-more,
#list-less {
color: #00b8e4;
margin: 0 0 0 15px;
cursor: pointer;
}
#list-more:hover,
#list-less:hover {
color: #0084bf;
}
#list-less {
display: none;
}
#list-more:after {
content: "";
margin: 0 0 3px 5px;
display: inline-block;
border: 5px solid transparent;
border-top: 5px solid #000;
border-bottom: 0 none;
}
#list-less:after {
content: "";
margin: 0 0 3px 5px;
display: inline-block;
border: 5px solid transparent;
border-top: 0 none;
border-bottom: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="list-list">
<ul>
<li>In hac habitasse platea dictumst. Morbi fini</li>
<li>l sagittis nulla. Donec tempor ex augue, eget convallis est vulputat</li>
<li>ies dui ut placerat. Quisque blandit ullamcorper sem, ut conseq</li>
<li>volutpat ultrices nunc. Nullam mattis velit eros, non rhoncus nibh laoreet varius.</li>
<li>ui ut placerat. Quisque blandit ullamcorper sem, ut consequat ante tristique id. Nam nisl ligula, rhoncus quis blandit vel, varius hendrerit libero. Nullam</li>
<li>s arcu a aliquam bibendum. In id odio odio. Ut ac gravida erat.</li>
<li>onvallis lectus fringilla non. Pellentesque velit elit, pellentesque at tincidunt pellentesque, bibendum nec sap</li>
<li>ulus mus. Nullam nec vehicula justo. Ut vel nibh vulputate ante tincid</li>
</ul>
<span id="list-more">Read More</span>
<span id="list-less">Read Less</span>
</div>

you need something like this :
$(document).ready(function() {
var listHeight = $('#list-list').outerHeight(),
fontSize = $('#list-list').css('font-size').replace('px', ''),
lineHeight = Math.floor(parseInt(fontSize * 1.5)),
lines = Math.floor(listHeight / lineHeight),
closedLines = 4,
margin = 20;
$('#list-list').css("height", (closedLines * lineHeight) + "px");
$('.open-list').on('click', function(e) {
e.preventDefault();
$(this).parent('#list-list').css("height", (lineHeight * lines + margin) + "px");
$(this).fadeOut();
$('.close-list').fadeIn();
});
$('.close-list').on('click', function(e) {
e.preventDefault();
$(this).parent('#list-list').css("height", (closedLines * lineHeight + margin) + "px");
$(this).fadeOut();
$('.open-list').fadeIn();
});
});
body {
font-family: arial;
}
#list-list ul {
padding: 0 0 0 15px;
margin: 0 0 5px 0;
}
#list-list {
position: relative;
overflow: hidden;
transition: height 1s ease;
}
#list-list li {
line-height: 25px;
}
#list-list>button {
color: #00b8e4;
position: absolute;
bottom: 0;
left: 0;
}
#list-list>.open-list:after {
content: "";
margin: 0 0 3px 5px;
display: inline-block;
border: 5px solid transparent;
border-top: 5px solid #000;
border-bottom: 0 none;
}
#list-list>.close-list {
display: none;
}
#list-list>.close-list:after {
content: "";
margin: 0 0 3px 5px;
display: inline-block;
border: 5px solid transparent;
border-top: 0 none;
border-bottom: 5px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list-list">
<ul>
<li>In hac habitasse platea dictumst. Morbi fini</li>
<li>l sagittis nulla. Donec tempor ex augue, eget convallis est vulputat</li>
<li>ies dui ut placerat. Quisque blandit ullamcorper sem, ut conseq</li>
<li>volutpat ultrices nunc. Nullam mattis velit eros, non rhoncus nibh laoreet varius.</li>
<li>ui ut placerat. Quisque blandit ullamcorper sem, ut consequat ante tristique id. Nam nisl ligula, rhoncus quis blandit vel, varius hendrerit libero. Nullam</li>
<li>s arcu a aliquam bibendum. In id odio odio. Ut ac gravida erat.</li>
<li>onvallis lectus fringilla non. Pellentesque velit elit, pellentesque at tincidunt pellentesque, bibendum nec sap</li>
<li>ulus mus. Nullam nec vehicula justo. Ut vel nibh vulputate ante tincid</li>
</ul>
<button class="open-list">Read More</button>
<button class="close-list">Read Less</button>
</div>

wrap content inside parent element

I am having problem wrapping all contents inside a parent.My jQuery is working fine. What I intent to do is to make slideshow. Slideshow is working perfect but my problem is to wrap all content inside the "The red box".Rightnow section with id "allprojects" doesn't expand to fill all the contents of sections inside it. Ideally "#allprojects" should contract or expand according to content. This is how it appears
As I missing something obvious? please help me.
Bellow is my HTML.
<div id="projects">
<section id="allprojects" >
<section id="projectone" class="show">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo semper nulla, id ultricies erat tincidunt at. Vivamus malesuada justo eu massa fringilla, a lacinia justo hendrerit. Integer ornare ipsum non dictum suscipit. Quisque feugiat eleifend posuere. Maecenas porttitor non neque in tempus. Aliquam
</section>
<section id="projecttwo">
Nam quis ante tellus. Nullam iaculis elementum odio at convallis. Duis sodales porttitor dolor sed lacinia. Mauris sodales, ipsum eu tristique varius, erat mauris luctus tellus, ultrices viverra leo dui at nunc. Sed ac malesuada tellus. Nam quis lacus sit amet nibh egestas adipiscing. Interdum et malesuada fames ac ante
</section>
<section id="projectthree">
Nulla vitae volutpat nunc. Integer ornare enim vitae euismod viverra. Pellentesque ac hendrerit orci. Praesent eleifend augue luctus magna fringilla posuere. Nulla tincidunt volutpat semper. Morbi malesuada tempus vehicula. Proin non posuere metus. Aenean condimentum velit lorem. Donec at suscipit leo. Morbi
</section>
<section id="projectfour">
Vestibulum mattis metus rhoncus enim sollicitudin vehicula. Duis id nisl eget neque laoreet sagittis vitae eu justo. Sed et elit sit amet augue dictum dignissim. Cras neque ligula, dictum sed nibh ut, sodales malesuada mi. Duis feugiat semper nibh eget feugiat. In vestibulum augue nec felis tincidunt pulvinar
</section>
<span class="prev">«</span>
<span class="next">»</span>
</section>
</div>
CSS:
html{
background-size: cover;
background-color: #F2F2F2 ;
max-height: 100%;
margin: 0 auto;
}
body{
max-height: 100%;
background-color: #F2F2F2 ;
margin: 0 auto;
}
#allprojects section{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
.show{
opacity: 1 !important;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 26%;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 26%;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
#allprojects{
font-family: 'Gabriela', serif;
text-align: justify;
width: 40%;
font-size: 1.7vw;
color: #000;
line-height: 150%;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: auto;
padding: 4%;
background-color: #F2F2F2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 5px solid #D8262E;
display: block;
}
#allprojects section{
font-family: 'Gabriela', serif;
text-align: justify;
width: 40%;
font-size: 1.7vw;
color: #000;
line-height: 150%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}

You have positioned your sections with absolute. This takes them out of the natural flow and therefore, the wrapper has no idea of their volume and collapses.
You'll either need to specify the size of the slider, or do some trick like,
height: 0px; padding-bottom: 50%;
And hack it to get the ratio you want.

Elements that are absolute positioned are taken out of the DOM flow.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/?redirect_from_locale=hr#Absolute_and_fixed
Your parent container does not know the height of the child elements, which is why the red box does not clear them.