jquery accordion - onclick opening all accordion - javascript

I have created a custom jquery accordion and I am stuck with the code, when I click on accordion title, its opening both of the accordion where it should open the one where I have clicked, following are the codes:
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).siblings('.acc-body').slideUp(200);
$(".acc-wrap > .acc-head").attr('class', 'acc-head opened');
} else {
$(".acc-wrap > .acc-head").attr('class', 'acc-head closed');
$(this).addClass("active");
$('.acc-body').slideUp(200);
$(this).siblings('.acc-body').slideDown(200);
}
});
});
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
<div class="acc-wrap">
<div class="acc-head opened"> Vestibulum </div>
<div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
<div class="acc-head"> Vestibulum 2</div>
<div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
</div>
</div>

I think you should use the next-function instead of the siblings-function:
https://api.jquery.com/next/
<style>
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
</style>
`

You can try something like this:
$(this)
// Add/ Remove active and opened as both will always be together.
.toggleClass('active opened')
// Add closed if active not present else remove it
.toggleClass('closed', !$this.hasClass('active'))
// Go to next element
.next()
// Toggle slide on every click
.slideToggle(200)
Also note that $(".acc-wrap > .acc-head"); is pointing to all accordion headers. You should always try to use this and navigate to necessary div.
Sample
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
var $this = $(this)
$this
.toggleClass('active opened')
.toggleClass('closed', !$this.hasClass('active'))
.next()
.slideToggle(200)
});
});
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
<div class="acc-wrap">
<div class="acc-head">Vestibulum</div>
<div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
<div class="acc-head">Vestibulum 2</div>
<div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
</div>
</div>

Add This it is much easy and fast than yours http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

Instead of using referencing the elements by class you want to use "this".find("element").attr() etc etc. You are targeting all elements matching the class .acc-head when using this $(".acc-wrap > .acc-head");
Alternatively you could reference the targeted element using $(".acc-wrap > .acc-head.active");

$(".acc-wrap > .acc-head:not(.opened)");

<div style="max-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6dec" >Vestibulum
<span id="plus"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span> </a>
</h4>
</div>
<div id="collapse6dec" class="panel-collapse collapse">
<div class="panel-body" style="">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top:-20px">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab1">
<a data-toggle="collapse" data-parent="#accordion" href="#lorem2" >Vestibulum 2 <span id="plus1"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus1" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="lorem2" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var counter = -1;
$("#ab").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus").css('display','none');
$("#minus").css('display','inline');
}
else{
$("#plus").css('display','inline');
$("#minus").css('display','none');
}
});
$("#ab1").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus1").css('display','none');
$("#minus1").css('display','inline');
}
else{
$("#plus1").css('display','inline');
$("#minus1").css('display','none');
}
});
</script>

Related

Center elements horizontally in div

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>

offsetting anchor link with a sticky header

i have a navbar and a sticky header which you can check it out in snippet. Now if i click on my anchors, I get scrolled down to the right position, even the header doesn't overlap the text of the div except in one strange case.
the problem is when i'm in the #Home section, after clicking on any anchors ( no matter #AboutMe or #Skills), it sends me to the right position but the header overlaps the text a little bit which is not what i want.
so when i'm in #AboutMe section and click on #Skills anchor for example, nothing strange happens and everything is alright but the problem is when you are in the #Home section and you wanna get to another sections by clicking on their anchors, it sends you a little bit lower than where it should get you.
to find out what i mean exactly, you need to click on #AboutMe anchor twice when you are in #Home section ( same as #Skills anchor) then you will find out on first attempt, it's not doing the job properly and you need to click on that specific anchor, twice to get the result you're looking for.
NOTE: ignore other styles like texts positioning or images which are not really important here and the snippet i've provided is enough to show you what my issue is.
has anybody ever faced this strange issue?
JS fiddle link: https://jsfiddle.net/f715j3qh/120/
$(document).ready(function () {
var aboveHeight = $('header').height();
$(window).scroll(function () {
if ($(window).scrollTop() > aboveHeight) {
$('nav').addClass('fixed').css('top', '0').next().css('padding-top', '70px');
} else {
$('nav').removeClass('fixed').next().css('padding-top', '0');
}
});
});
.header {
text-align: center;
}
.header-top {
font-size: 3.5rem;
height: 210px;
background: #28223f;
}
.header-top-p {
padding: 40px 0 30px;
}
.header p{
color:#a8c6de;
letter-spacing:1px;
}
#header-nav {
background-color: yellow;
color: black;
justify-content: space-between;
height: 70px;
background-image: yellow;
width: 100%;
margin: 0 auto;
align-items: center;
z-index: 10000;
}
nav .mainMenu {
list-style: none;
display: flex;
}
#header-nav ul li {
position: relative;
margin: 0 auto;
}
#header-nav ul li.active {
opacity: 1;
text-shadow: -3px 3px 7px #4d4d00;
}
nav .mainMenu li a {
font-weight: bold;
color: black;
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
.anchor {
display: block;
height: 70px;
margin-top: -70px;
visibility: hidden;
}
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
#Matin-Pic {
background: #28223f;
min-height: 63vh;
}
.Matin-Picture {
margin: 15px auto;
color: #b3b8cd;
width: 380px;
background: brown;
text-align: center;
border-radius: 5px;
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.cover-photo {
background: lightblue;
height: 130px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.non-profile {
height: 130px;
width: 100%;
}
.non-profile img {
height: 160px;
width: 175px;
margin: auto 150px;
display: flex;
}
.profile {
height: 140px;
width: 105px;
border-radius: 50%;
border: 1px solid #1f1a32;
padding: 7px;
background: #292343;
margin: -70px 0 0 203px;
}
.profile-name {
font-size: 25px;
font-weight: bold;
margin: 25px 0 0 -100px;
}
.about {
margin-top: 35px;
line-height: 25px;
font-size: 1.7rem;
}
#Matin-Pic button {
margin: 15px 10px 30px;
}
.msg-btn, .follow-btn {
border-radius: 3px;
cursor: pointer;
background: lightblue;
color: brown;
border: 1px solid lightblue;
padding: 10px 25px;
}
.follow-btn {
background: transparent;
color: lightblue;
}
#Matin-Pic i {
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
cursor: pointer;
color: lightblue !important;
}
.section-1 {
background: #fff;
height: auto;
width: 100%;
}
.section-1 img {
margin-top: 160px;
border-radius: 10px;
width: 100%;
height: auto;
}
#AboutMe-image img:nth-child(1) {
box-shadow: -5px -5px 10px blue;
display: block;
}
#AboutMe-image img:nth-child(2) {
display: none;
box-shadow: -5px 5px 10px blue;
}
.section-1-image img {
display: none;
box-shadow: 5px 5px 10px blue;
}
.section-1 h3 {
font-style: oblique;
font-weight: bold;
font-size: 3rem;
margin: 60px auto;
color: blue;
}
.section-1 p {
color: black;
}
.section-1 p:nth-child(2) {
margin: 0 auto 15px;
font-size: 1.6rem;
}
.section-1 p:nth-child(3) {
font-size: 1.4rem;
line-height: 2.5;
}
#AboutMe {
margin-bottom: 110px;
min-height: 78vh;
}
#AboutMe-Text {
padding-right: 50px;
}
#Skills {
background: rgba(168, 198, 222, 0.2);
margin: 0 auto;
border-radius: 300px 15px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 52px auto 0;
font-size: 1.6rem;
color: black;
}
.section-2 ul li:first-child {
margin-top: 30px;
}
.section-2 ul li:last-child {
margin-bottom: 52px;
}
.section-2 img {
margin: 32px auto;
max-width: 220px;
height: 540px;
border-radius: 7px;
}
.main-titles {
text-align: center;
font-weight: bold;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Home">
<div class="container-fluid">
<div class="row">
<header class="header header-top">
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
</header>
<nav id="header-nav">
<ul class="mainMenu">
<li class="Home">Home</li>
<li class="AboutMe">About Me</li>
<li class="Skills">Skills</li>
</ul>
</nav>
</div>
</div>
</section>
<!--end Home section and header-->
<!-- ***** card profile ***** -->
<div id="M-Pic" class="container-fluid">
<div class="M-Picture">
<div class="cover-photo">
<div class="non-profile">
<img src="Content/images/logo.png">
</div>
<img src="Content/images/MPic.jpg"
class="profile">
</div>
<div class="profile-name">text</div>
<p class="about">some text here<br>some text</p>
<button class="msg-btn" onclick="#">send</button>
<button onclick="#" class="follow-btn">button1
</button>
<div>
<a href="#"><i
class="fab fa-linkedin"></i></a>
<a href="#"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<span class="anchor" id="AboutMe-anchor"></span>
<section id="AboutMe" style="padding-top:3rem;">
<div class="container">
<div class="row">
<div class="section-1">
<div id="AboutMe-image" class="col-md-5 col-sm-5 slide-in fade-in">
<img src="Content/images/bg2-com2.jpg" alt="an image" width="1280" height="850">
<img alt="an image" src="Content/images/bg2-com5.jpeg" width="1000" height="800">
</div>
<div id="AboutMe-Text" class="col-md-7 col-sm-7 slide-in fade-in">
<h3>some text here</h3>
<p>some text here</p>
<p>some text here<br> some text 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 nostr
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <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 nostr.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
</p>
</div>
<div class="col-xs-12 section-1-image">
<!-- <img alt="an image" src="Content/images/bg2-com.jpg" width="598" height="399" class="fade-in slide-in"> -->
</div>
</div>
</div>
</div>
</section>
<!--end AboutMe-->
<!-- ***** skills ***** -->
<span class="anchor" id="Skills-anchor"></span>
<section id="Skills" style="padding-top:1rem;">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<h2 class="main-titles fade-in-main-titles slide-in-main-titles">skills</h2>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="Content/images/MySkills2.gif"
class="img-responsive center-block fade-in-skills slide-in-skills">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
</ul>
</div>
</div>
</div>
</div>
</section>

My div block does not push the page content down and javascript is not closing the div block

Hello I'm trying to create a banner add block for donation. This div block should push the page content down. Also there is a close button to close the banner. However, the close button doesn't work. In the banner.js file I'm listening for a click and adding a banner-hide class to each div to close the banner.
Can someone help? I'm including the html css and javascript code blocks here.
html:
<div id="alert-banner" class="banner banner-top alert-primary" role="banner">
<div class="p-4 align-self-end" style="max-width:30em">
<h1 class="pb-4">Help us wake up to a 2020 that changes the way we see vision loss!</h1>
<div class="text-center text-md-left"><a class="btn btn-donate text-center" style="min-width: 14em;" href="https://secure.everyaction.com/">Make a Donation</a>
</div>
</div>
</div>
banner.js:
$(function() {
var add - banner = $('#alert-banner');
var btnClose = $('.banner-close');
btnClose.addEventListener("click", function(closeEvt) {
$(".banner").addClass("banner-hide");
$(".p-4").addClass("banner-hide");
$(".text-center").addClass("banner-hide");
});
});
banner.css
.banner {
position: relative;
width: 100%;
text-align: center;
padding: 8px;
padding-top: 0px;
background-color: rgba(0, 0, 0, 0.5);
max-height: 100px; /* set it at will according to your message's length
in small devices */
top: 0px;
left: 0px;
right: 0px;
border: 1px solid transparent;
border-radius: .25rem;
outline: none !important;
display: block;
}
.banner * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.banner-bottom {
left: 0;
right: 0;
bottom: 10px;
}
.banner-top {
left: 0;
right: 0;
top: 10px;
}
.banner-right {
right: 10px;
bottom: 10%;
min-height: 10vh;
}
.banner-left {
left: 10px;
bottom: 10%;
min-height: 10vh;
}
.alert-primary {
text-align: left;
vertical-align: middle;
display: inline-block;
white-space: normal;
max-width: 100%;
max-height: 100%;
outline: none !important;
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.banner-close {
width: 35px;
height: 35px;
position: fixed;
right: 0;
top: 0;
-webkit-appearance: none;
cursor: pointer;
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner-close::-moz-focus-inner {
border: 0;
padding: 0;
}
.banner-close:hover,
.banner-close:focus,
.banner-close:active,
.banner-close:visited {
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner-close:active {
top: 1px;
}
Please add the missing elements to your question as suggested in the comments. I don't know what is going on with your variables, but there is a much simpler way to do what you want. I took the liberty to add the html for a button and used the css you have there. You can see it work in this jsfiddle. As you can see the lorem ipsum content is pushed down.
Here is my suggested js function:
$(document).ready(function() {
$('.banner-close').click(function(e) {
e.preventDefault();
$("#alert-banner").hide();
});
});
This is how I modified the HTML for test purpose:
<div id="alert-banner" class="banner banner-top alert-primary" role="banner">
<div class="p-4 align-self-end" style="max-width:30em">
<h1 class="pb-4">Help us wake up to a 2020 that changes the way we see vision loss!</h1>
<div class="text-center text-md-left"><a class="btn btn-donate text-center" style="min-width: 14em;" href="https://secure.everyaction.com/">Make a Donation</a>
</div>
<div>
<button type="button" class="banner-close" data-dismiss="alert" aria-label="Close">×</button>
</div>
</div>
</div>
<div>
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>

Why Can't I use array.indexOf(this.innerHTML)?

So I have a list of links in the footer and I want to be able to click on a link and have it swapped out with the link on the top of the list, if it isn't there already. I'm so far able to move the link that is clicked on to the top, but I can't figure out how to move the top link to the position of the one that was clicked? I've tried using indexOf(this.innerHTML) but its saying its not a function.
EDIT: I've also tried nodeList.item() which also didn't work:(
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if(footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log(footerLinks.indexOf(this.innerHTML));
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0,0,0,0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin:2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>
querySelectorAll returns a static NodeList, which isn't an array. To convert it to an array, use spreading [...] It is a collection of HTML elements, so you need to use indexOf(this), not indexOf(this.innerHTML) (because it's not an array of strings).
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if (footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log([...footerLinks].indexOf(this));
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand,
.nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img,
.col-3 h3,
.col-3 p {
position: relative;
top: -8px;
}
.col-2 img,
.col-2 h3,
.col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin: 2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

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

Categories