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

Why does it work in Safari but not in Chrome?

This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>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..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>

javascript/jquery: scroll function does not work after running click function

I built a scroll function to hide the navigation (.li) and show the burger-menu (#menu).
Farther I built a click function on the burger-menu to open the fullSizeMenu.
After the second click event to hide the fullSizeMenu, the scroll function no longer works as built. By scrolling back to top, the navigation is not displayed although it should at a wide over 1100px.
How can I implement this without having to install a reload?
$(document).ready(function() {
var open = false;
$(window).scroll(function() {
if (document.documentElement.scrollTop > 50 ) {
$('.li').addClass('remove-li');
$('#menu').show();
}
else {
$('.li').removeClass('remove-li');
$('#menu').hide();
}
})
$('#menu').click(function() {
if(open = !open){
$('.fa-bars').addClass('fa-times');
$( ".li" ).wrapAll( "<div class='fullSizeMenu' />");
$('.fullSizeMenu').show();
$(".li").removeClass('remove-li');
$('.li').addClass('change-li');
$('a').addClass('change-a');
$(window).off('scroll')
}
else {
$('.fa-bars').removeClass('fa-times');
$( ".li" ).unwrap();
$('.fullSizeMenu').hide();
$(".li").addClass('remove-li');
$('.li').removeClass('change-li');
$('a').removeClass('change-a');
// window.location.reload(true);
}
})
})
body {
background: rgb(238, 238, 238);
font-family: 'Open Sans', 'Arvo', sans-serif;
font-size: 20px;
margin: 0;
padding: 0;
top: 0;
left: 0;
height: 100vh;
}
/* Header with Navigation */
header {
height: 80px;
margin: 0;
padding: 0;
background: white;
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
}
.nav-container {
width: 60%;
left: 20%;
position: relative;
}
#menu {
display: none;
background-image:linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
ul {
float: right;
}
ul li {
padding: 10px;
list-style: none;
float: left;
}
.remove-li {
display: none;
}
.change-li {
width: 100%;
float: left;
color: white;
font-size: 30px;
display: initial !important;
margin-top: 20px;
}
ul li a {
font-family: 'Open Sans';
font-size: 12px;
color:darkgrey;
text-decoration: none;
}
.change-a {
font-size: 26px;
color: white;
}
.logo {
width: 150px;
height: 20px;
margin-top: 30px;
}
button {
width: 70px;
height: 25px;
border: none;
outline: none;
float: right;
border-radius: 6px;
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%)
}
.button-text {
font-size: 12px;
color: white
}
/* FullSizeMenu */
.fullSizeMenu {
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%);
font-family: 'Open Sans', 'Arvo', sans-serif;
font-size: 40px;
text-align: center;
padding: 50px 0;
top: 80px;
left: -50%;
height: 100vh;
width: 200%;
position: absolute;
display: block;
overflow: auto;
}
/* Header with Navigation Mobile */
#media (max-width: 1100px) {
.header {
margin: 0;
padding: 0;
background: white;
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
}
.nav-container {
position: relative;
text-align: center;
top: 10%;
left: 10%;
width: 80%;
background: linear-gradient(to right, rgb(39, 192, 146) 0%, rgb(29, 203, 216) 50%, rgb(5, 142, 255) 100%)
}
.logo {
float: left;
}
.button {
display: none;
}
#menu {
display: block !important;
float: right;
}
ul .li {
display: none;
}
.remove-li {
display: none;
}
.change-li {
color: white;
font-size: 30px;
display: block !important;
width: 100%;
float:left;
}
.li .a{
color: white;
margin-right: 50%;
}
.fullSizeMenu {
margin-top: -10px;
}
}
/* Main Content with Paginated Image Slide */
main {
margin: 0;
padding: 0;
}
.slider-container {
width: 60%;
margin-top: 15%;
left: 20%;
background: white;
overflow: hidden;
height: 300px;
position: relative;
user-select: none;
}
input {
display: none;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.image-container {
width: 50%;
height: 100%;
float: left;
}
img {
width: 100%;
height: 100%;
}
.article-container {
width: 50%;
height: 100%;
float: left;
padding: 20px;
overflow: auto;
box-sizing: border-box;
}
h1 {
font-family: 'Arvo';
color: rgb(35, 182, 182);
}
p {
font-size: 14px;
color: darkgrey;
}
#pagination {
width: 100%;
bottom: 5%;
position: absolute;
text-align: center;
z-index: 99;
cursor: default;
}
#pagination .dots {
float: right;
width: 8px;
height: 8px;
margin-right: 20px;
position: relative;
border-radius: 100%;
display: inline-block;
background: white;
border: 2px solid rgb(54, 54, 54);
transition: .4s;
cursor: pointer;
}
#pagination .dots:hover {
background: rgb(54, 54, 54);
}
#i1:checked ~ #slide1,
#i2:checked ~ #slide2,
#i3:checked ~ #slide3{
z-index: 9;
animation: scroll 1s ease-in-out;
}
#i1:checked ~ #slide1 #dot1 {background: rgb(54, 54, 54);}
#i2:checked ~ #slide2 #dot2 {background: rgb(54, 54, 54);}
#i3:checked ~ #slide3 #dot3 {background: rgb(54, 54, 54);}
#keyframes scroll {
0% { opacity: .4;}
100% { opacity: 1;}
}
/* Main Content with Paginated Image Slide Mobile*/
#media screen and (max-width: 768px) {
.slider-container {
margin-top: 30%;
left: 10%;
width: 80%;
height: 500px;
}
.image-container {
width: auto;
height: 200px;
}
.article-container {
width: auto;
height: auto;
padding: 20px;
text-align: center;
overflow: auto;
}
#pagination .dots {
float: none;
}
}
/* Footer */
footer {
margin: 0;
padding: 0;
padding: 5%;
color: rgb(54, 54, 54);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="./app.js" type="text/javascript"></script>
<title>XXX</title>
</head>
<body>
<header>
<nav class="nav-container">
<a href="#!">
<img class="logo"src="./assets/images/logo.png">
</a>
<ul>
<li class="li">
Startseite
</li>
<li class="li">
Autos
</li>
<li class="li">
Standorte
</li>
<li class="li">
Hilfe
</li>
<li class="li">
Kontakt
</li>
<li class="li">
<button>
<a class="button-text" href="#!">Login</a>
</button>
</li>
<li>
<i class="fas fa-bars" id="menu"></i>
</li>
</ul>
</nav>
</header>
<main>
<div class="slider-container">
<input type="radio" id="i1" name="images" checked/>
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<div class="slide" id="slide1">
<section class="image-container">
<img src="./assets/images/affen.jpg">
</section>
<section class="article-container">
<article>
<h1>Porsche</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div class="slide" id="slide2">
<section class="image-container">
<img src="./assets/images/giraffen.jpg">
</section>
<section class="article-container">
<article>
<h1>Audi</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div class="slide" id="slide3">
<section class="image-container">
<img src="./assets/images/loewen.jpg">
</section>
<section class="article-container">
<article>
<h1>VW</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>
</section>
</div>
<div id="pagination">
<label for="i1" class="dots" id="dot1"></label>
<label for="i2" class="dots" id="dot2"></label>
<label for="i3" class="dots" id="dot3"></label>
</div>
</div>
</main>
<footer>
<p> Copyright by xxx</p>
</footer>
</body>
</html>

So your implementation has quite some bad practices to begin with. A quick fix for your problem would be to add the $('body').css('overflow', 'hidden'); when the #menu is open and remove this css when menu is closed.
This way you can remove completely the $(window).off("scroll"); which is causing the scrolling event to stop, that's why you don't have the expected behaviour.
But I would refactor it completely since you are wrapping li element with a div inside ul which is not the way it should go, also naming classes such as <li class='li'></li> doesn't make sense.
If I can find more time I can provide you with an easy way to refactor this but for now I think the CSS trick will do to fix your issue.
I've created this pen so you can see it working: https://codepen.io/anon/pen/ejQxrV

How do I position a div relative to the parent div which contains dynamic text?

I am working on requirement where I need to show a popup message on click of some text (This is a dynamic text whose length can vary), am trying to achieve something as shown in the below screenshot.
But the problem am facing is when I tr to position it if I change the text to something lengthy or short the popup still remains in the same place, I want it to be positioned with respect to the "*" irrespective of the text length (In this example: Ready within 4 hours)
The HTML:
<div class="bopis-messaging">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim
ad minim veniam, quis nostrud
</div>
</div>
<style>
.bopis-messaging {
position: relative
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
right: 30%;
top: -23%;
height: auto;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
</style>
It gave me this result, but if try to change the text to "Ready within 4 hours " , the popup still stays in the same position, whereas i want it to be over the "" .
Your help will be much appreciated

A nice approach would be to use data- attributes on your html, then display them via a pseudo-element content property.
/*just for the SO snippet positioning*/
.bopis-messaging {
margin: 140px;
}
/* stablishes that any anchor tag with a data-tooltip attibute
/* will be relative positioned, so the pseudo-element will be
/* absolute positioned accordingly*/
a[data-tooltip] {
position: relative;
}
/* displays a tooltip as an absolute positioned pseudo-element,
/* which contents are in the data-tooltip html attribute
/* starts as zero-scaled for a fancy display on hover*/
a[data-tooltip]::after {
content: attr(data-tooltip);
display: block;
position: absolute;
width: 180px;
border: 1px solid #333;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
bottom: 100%;
right: 0;
transform-origin:bottom;
transform: translate(50%, 0) scale(0);
transition: transform 200ms ease-out;
}
/*reveals the tooltip on hover*/
a[data-tooltip]:hover::after {
transform: translate(50%, 0) scale(1);
}
<div class="bopis-messaging">
Ready within 7 Days *
<br>
longer text is longer is longer is longer *
<br>
short text *
</div>
edit: Since you specified additional requirements, here's a version with a hiding div instead, as CSS pseudo-elements "content" will not parse HTML from a data-attibutes
/*just for SO snippet positioning*/
.bopis-messaging {
margin:170px;
}
.bopis-hoverable{
position:relative;
display:inline;
}
/* displays a tooltip as an absolute positioned element,
/* starts as zero-scaled for a fancy display on hover*/
.bopis-msg-content {
display: block;
position: absolute;
width: 230px;
border: 1px solid #333;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 10px;
bottom: 100%;
right: 0;
transform-origin:bottom;
transform: translate(50%, 0) scale(0);
transition: transform 200ms ease-out;
}
/*reveals the tooltip on hover*/
.bopis-hoverable:hover > .bopis-msg-content{
transform: translate(50%, 0) scale(1);
}
<div class="bopis-messaging">
<div class="bopis-hoverable">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small"> <h4>Ready within 7 Days</h4>
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod <br> ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud</p>
</div>
</div>
</div>

Try this
.bopis-messaging {
position: relative;
display: inline-block;
}
.margin-top-200 {
margin-top:200px;
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
<div class="margin-top-200"></div>
<div class="bopis-messaging">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim
ad minim veniam, quis nostrud
</div>
</div>

If your "*" is always at the end of the text you can solve it like this:
(Se my comments in the css).
<div class="container">
<!--Just a bunch of br element to place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution-->
<div class="bopis-messaging">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim
ad minim veniam, quis nostrud
</div>
</div>
</div>
<style>
.bopis-messaging {
margin-top: 300px; /*place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution*/
position: relative;
display: inline-block; /* Important so that the container will dynamically fit to the size of the content */
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
left: 100%; /*Place it at the end of the parent element */
margin-left: -116px; /*half of width (this also includes the padding) to place the box back so its at the center of the "*" NB*/
bottom: 200%; /*Place it above */
height: auto;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
/*Added a triangle:*/
.bopis-msg-content:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 15px #000;
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
</style>

Here is the jsfiddle have a look.
<div class="bopis-messaging">
Ready within 4 Business Business Business Hours *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud
</div>
</div>
CSS
.bopis-messaging {
position: relative;
margin-top: 150px;
display: inline-block;
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
right: -100px;
bottom: 150%;
height: auto;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}

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;
}