We Keep Coding

DOM Manipulation modal window error with open button

I am learning JavaScript and have tried to make a modal window open when a button is pressed. I'm using an event listener, but I keep getting an error saying that this block of code is undefined: btnOpenModal.addEventListner('click', openModal);
Any help is most appreciated. Thank you in advance.
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelector('.show-modal');
const openModal = function () {
// console.log('Button clicked');
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
const closeModal = function () {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
btnOpenModal.addEventListner('click', openModal);
btnCloseModal.addEventListner('click', closeModal)
*{
margin: 0;
padding: 0; box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
.show-modal {
font-size: 2rem;
font-weight: 600;
padding: 1.75rem 3.5rem;
margin: 5rem 2rem;
border: none;
background-color: #fff;
color: #444;
border-radius: 10rem;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
p{
font-size: 1.8rem;
}
/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */
.hidden {
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
<button class="show-modal">Show modal</button>
<div class="modal hidden">
<button class="close-modal">×</button> <h1>I'm a modal window </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
ea
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p> </div>
<div class="overlay hidden"></div>
enter link description here

Revealing transition of div when hovering over it

I'm trying to create a "hover to reveal content" div
Like this:
html {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: red;
}
hr {
transition: width 1s;
width: 5rem;
margin: 0 auto 0 auto;
}
#container {
width: 50%;
height: 100%;
padding: 5rem;
background-color: white;
margin: auto;
}
.expand {
width: 100%;
height: 1rem;
padding: 1rem 0 1.1rem 0;
background: inherit;
transition: height 0.5s;
text-align: center;
}
.wrapper:hover>.expand {
height: auto;
}
.wrapper:hover>hr {
width: 100%;
}
.text {
margin: 1rem 0 0 0;
overflow: hidden;
height: 0;
transition: height 0.5s;
}
.wrapper:hover .text {
height: 16rem;
transition: height 1s;
}
<div id="container">
<div class="wrapper">
<hr>
<div class="expand">
Hover to Learn more
<div class="text">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<hr>
</div>
</div>
But I'm facing a few problems:
As you can see when running the sample code it opens perfectly but
when hovering out of the div there is no closing transition
I have to manually add a value height:16rem instead of automatically assigning the height required
.wrapper:hover .text {
height: 16rem;
transition: height 1s;
}
(this becomes and issue when the browser is resized)
my best guess is that both the issues arise because of the height:auto source
so I'm guessing it's almost impossible to fix via css but is there any javascript solution (ideally using Vanilla js)?

One way I have worked around this exact challenge was to avoid trying to transition a dynamic element's height. You can still achieve a similar 'feel' by using something like:
.wrapper {
transition: transformY(0);
opacity: 0;
height: 0;
}
.wrapper:hover {
transition: transformY(10px);
height: auto; // Don't animate this property
opacity: 1;
}

Sliding Animation Stutters in Accordion

I have an accordion menu with tabs. When you click on the tabs, information is displayed below one of them, by sliding up and down smoothly.
The problem is that there is a stutter in the animation, during slideUp and slideDown. I also tried animate and adjusting some of the css, but I can't figure it out.
If it helps, here's the fiddle.
HTML:
<div class="project-container">
These don't slide well:
<ul class="project-nav">
<li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
<section class="is-open">
<p id="current-project-title">TITLE</p>
<p>TEXT HERE</p>
</section>
</li>
<li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
<section>
INFO HERE<br>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</li>
</ul>
</div>
<br>
But this slides VERY well:
<br>
<button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
<section class="info-container">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>
Javascript:
$(document).ready(function() {
var Tabs = {
el: {
nav: $(".project-nav"),
tabs: $(".project-nav > .project-tab > a"),
panels: $(".project-nav > .project-tab > section"),
},
init: function() {
Tabs.bindUIActions();
},
bindUIActions: function() {
Tabs.el.nav
.on(
'click',
'.project-tab > a:not(.active)',
function(event) {
Tabs.deactivateAll();
Tabs.activateTab(event);
event.preventDefault();
}
);
},
deactivateAll: function() {
Tabs.el.tabs.removeClass("active");
Tabs.el.panels.removeClass("is-open").slideUp('slow');
},
activateTab: function(event) {
$(event.target)
.addClass("active")
.next()
.addClass("is-open").slideDown('slow');
}
};
Tabs.init();
////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');
////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
$('.info-container').slideToggle('slow');
$("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});

This your problem
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
You add transition css to slide element, it make slide effect not working correctly, you must remove it
you can try this jsfiddle

I was able to achieve the desired effect using CSS, instead of jquery. I used max-height transitions to make the tabs slide both up and down smoothly.
Here's the updated fiddle.
And here's the new CSS:
///// RESPONSIVE ACCORDION TO TABS
.project-container {
display: block;
}
.project-nav {
list-style: none;
position: relative;
}
.project-nav a:active{
opacity:1;
}
.project-nav .project-tab {
display: inline;
}
.project-nav > .project-tab > a {
display: inline-block;
padding: 10px 15px;
background-color: #00A88C;
border: solid 1px #00A88C;
border-radius: 0px 10px;
text-decoration: none;
color: #fff;
width:40%;
font-size: 30pt;
clear: both;
text-align: center;
}
#project-tab-1 {
margin-right: 2%;
margin-left: 7%;
}
#project-tab-2 {
margin-left: 2%;
}
#project-tab-link:hover {
background-color: #13ebc7;
border-color: #13ebc7;
}
#project-tab-link.active {
color: #00A88C!important;
background-color: rgba(19, 235, 199, 0)!important;
}
#project-tab-link.active:hover {
border-color: #00A88C;
}
.project-nav section {
position: absolute;
top: -9999px;
left: -9999px;
float: left;
color:#5c5c5c;
overflow: hidden;
border: solid 1px #00A88C;
width:100%;
margin-top:10px;
padding-bottom: 15px;
opacity: 0;
}
.project-nav section.is-open {
position: static;
opacity: 100;
}
.project-tab section p {
font-family:'century gothic';
padding: 0px 30px;
}
.project-tab section p:empty {
display: none;
}
#current-project-title{
font-size: 16pt;
}
#current-project-link {
float: right;
padding: 5px;
background: #00A88C;
color:#fff;
margin-right: 30px;
width: auto;
}
#current-project-link:hover {
background: #13ebc7;
}
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#media only screen and (max-width: 730px) {
#front-page-textbox{
background: #0f2347;
color: #fff;
}
.project-container {
margin-bottom: 10px;
}
.project-nav .project-tab a {
display: block;
width:100%;
border-radius: 0px;
}
#project-tab-1, #project-tab-2 {
margin-left: 0;
margin-right: 0;
}
.project-nav .project-tab a.active {
border: solid 1px #13ebc7;
}
.project-nav section {
margin:0;
position: relative;
top: auto;
left: auto;
float: none;
max-height:0;
padding-bottom: 0px;
opacity: 100;
}
.project-nav section.is-open {
border-radius: 0px;
border-top: none;
max-height: 1200px;
}
.project-tab > a:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
float: right;
font-size: 20pt;
margin-top: 10px;
}
.project-tab > a.active:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float:right;
font-size: 20pt;
margin-top: 10px;
}
/// TOGGLE BUTTON
.toggle-info {
display: block;
width: 100%;
color: #f5f5f5;
padding: 10px 15px;
background-color: #00A88C;
font-size: 30pt;
}
.toggle-info i{
font-size: 10pt;
margin-top: 10px;
float: right;
display: block;
}
.toggle-info:hover {
background-color: #13ebc7;
}
.toggle-info, .toggle-info:hover {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.info-container{
padding: 10px 15px;
border: solid 1px #00A88C;
}

Show/Hide content doesn't work on IE10 and below. Div not clickable

I have a jsfiddle here which demonstrates an Isotope gallery that when you clicked on, a description will slide up. It works well on Firefox, Chrome and IE 11 but not on IE10 and below.
script:
$('.showhide').click(function() {
$(this).toggleClass('showhidenew');
});
CSS:
.blurb {
bottom: 0;
color: white;
padding: 20px;
position: absolute;
}
.showhide {
cursor: pointer;
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
.more-content {
background: #008dee;
color: white;
cursor: pointer;
height: 100%;
padding: 11px 20px;
position: absolute;
right: 0;
top: 5px;
z-index: 10;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.showhide .more-content {
top: 100%;
}
.showhide.showhidenew .more-content {
top: 0;
}
.info {
background: none repeat scroll 0 0 #323232;
color: white;
padding: 7px 15px;
position: absolute;
right: 0;
top: 0;
z-index: 11;
}
.more.showthis{
bottom: 0;
}
Can anyone help? Thanks.

I found a solution. Putting the showhide class under the bits class made the showhide class not clickable. The solution I did was to remove the showhide div and add the showhide class inside the bits class to make the whole div clickable. I also made remove the 100% width on the showhide class.
Here's an updated fiddle
<div class="bits i-h3 showhide">
<div class="more-content">
<div class="info">X</div>
<h2>Title</h2>
<h5>Sub Title <br /> Description</h5>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- morecontent -->
<div class="blurb">
<h2>Title</h2>
<h5>Sub Title <br /> Description</h5>
</div><!-- blurb -->
<img src="http://placehold.it/580x450" alt="M Moser Associates" />
</div><!-- bits -->

Expand a Div Using jQuery

I'd like to expand .neo_accord_content_upon clicking a button referred to as .neo_expand_button. I've found several solutions but none seem to work in my case
Here is my HTML:
<body>
<div id="neo_wrapper"> <!-- Wrapper start -->
<div id="neo_container"> <!-- Container start -->
<div id="neo_header"> <!-- Header start -->
<div class="neo_logo">
<img src="http://fpoimagery.com/?t=px&w=200&h=100&bg=0ff&fg=000000" />
</div>
<div id="neo_main_nav"> <!-- Main navigation -->
<ul>
<li>About Us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Brokerage</li>
<li>Tenant Portal</li>
</ul>
</div> <!-- Main navigation end -->
</div> <!-- Header end -->
<div id="neo_home_image">
</div>
<div id="neo_about_section">
<div class="text_container">
<h1>About the Grossman Companies</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="about_button">
<p>Read More</p>
</div>
</div> <!-- About section end -->
<div id="neo_accord_section"> <!-- Accord section start -->
<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Acquisitions</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
<div class="text_container">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!--<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>-->
<!--<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>
<div class="neo_accord">
<div class="neo_accord_header">
<h1 class="neo_accord_headertext">Private Lending</h1>
<div class="neo_expand_button">
<p>Expand</p>
</div>
</div>
<div class="neo_accord_content">
</div>
</div>-->
</div> <!-- Accord section end -->
</div> <!-- Container end -->
</div> <!-- Wrapper end -->
</body>
My SASS:
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#neo_wrapper { /* Wrapper for entire page */
width: 100%;
height: 1800px;
margin: 0 auto;
background-color:#333;
#neo_container { /* Main content container */
width: 100%;
height: 100%;
margin: 0 auto;
background:#999999;
#neo_header { /* Header for logo, navigation */
width: 100%;
height: 100px;
background-color:#666666;
.neo_logo { /* Grossman logo */
float: left;
width: 200px;
height: 100px;
}
#neo_main_nav { /* Main navigation */
float: left;
margin: 55px 0 0 500px;
ul {list-style: none; padding-left: none; color: #FFF; font-size: 18px;}
li {
float: left; margin: 10px;
a {
/* Formatting for list items */
&:link {text-decoration: none; color: #FFFFFF;}
&:hover {color: #CCC; background-color: #333;}
&:active {color: #222; background-color: #222;}
&:visited {text-decoration:none; color: #FFF; background-color: #222;}
}
}
} /* Nav end */
} /* Header end */
.text_container { /* Container for centered text */
width: 500px;
text-align: center;
color:#000;
margin: 0 auto;
}
#neo_home_image { /* Fullbleed image */
width: 100%;
height: 400px;
}
#neo_about_section { /* About section */
width: 100%;
height: 200px;
background: #FFF;
.about_button {
width: 150px;
height: 35px;
background-color:#222;
color: #FFF;
text-align: center;
line-height: 35px;
margin: 0 auto;
margin-top: 15px;
cursor: pointer;
display: table;
}
} /* About section end */
#neo_accord_section {
width: 100%;
height: 700px;
.neo_accord { /* Drop down sections */
width: 100%;
height: 100px;
background: #222;
border: solid #FFF 1px;
.neo_accord_header { /* Header area in accordion section */
width: 100%;
height: 100px;
background: #222;
h1.neo_accord_headertext {
margin: 0 auto;
text-align: center;
font-size:24px;
color: #FFF;
}
.neo_expand_button {
width: 200px;
height: 35px;
background:#F00;
line-height: 35px;
text-align: center;
color: #FFF;
display: table;
cursor: pointer;
margin: 0 auto;
margin-top: 15px;
}
} /* End accordion header */
.neo_accord_content {
display: none;
background:#CCC;
color: #000;
width: 100%;
height: 150px;
margin: 0 auto;
}
} /* Accord container end */
} /* Accord section end */
} /* Container end */
} /* Wrappper end */
And JQuery:
// JavaScript Document
$(document).ready(function () {;
$("#neo_home_image").backstretch("http://fpoimagery.com/?t=px&w=960&h=400&bg=0ff&fg=000000 ");
$(".neo_expand_button").click(function () {
$(this).find('.neo_accord_content').slideToggle("slow");
//alert ("hello");
});
});
And here is my jsFiddle: http://jsfiddle.net/6brxu/

http://jsfiddle.net/6brxu/2/
$(document).ready(function () {;
$(".neo_expand_button").click(function (e) {
e.preventDefault();
$('.neo_accord_content').slideToggle("slow");
});
});
Your previous Javascript was searching for the class ".neo_accord_content" with ".neo_expand_button". I changed it to search the page for that class.