We Keep Coding

How do I make a working accordion and animate the height of the content and the rotation of the arrow symbol?

I've been struggling from fixing classList.add function and setting an element's property with Javascript. I want to animate and rotate the arrow symbol and animate the height of the content of the accordion.
I tried to animate the height of the content of the accordion by using transition property, but it seems it doesn't work, so I tried to set the property of its content itself(h4 and p element) and added transition, but it doesn't work either.
I tried to use addList.add/remove function to animate and rotate the arrow symbol which is the span element, but it seems that it doesn't work, is it because of the span element that causes this to occur?
var c1Tab1AccCB = document.getElementById("c1-tab1-acc-cb");
var c1Tab1AccBTN = document.getElementById("c1-tab1-acc-btn");
var c1Tab1Content = document.getElementById("c1-tab1-content");
var c1Tab1ContentH4 = document.getElementById("c1-tab1-content-h4");
var c1Tab1ContentP = document.getElementById("c1-tab1-content-p");
var c1Tab1AccBTNArrow = document.querySelector(".c1-tab1-acc-btn span:nth-child(2)");
var accordionArrow = document.getElementById("accordion-arrow");
c1Tab1AccCB.addEventListener("change", function() {
accordionToggle();
});
function accordionToggle() {
if (c1Tab1AccCB.checked == true) {
/*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
c1Tab1Content.style.height = "auto";
c1Tab1Content.style.paddingBottom = "20px";
c1Tab1ContentH4.style.height = "100%";
c1Tab1ContentP.style.height = "100%";
/*c1Tab1Content.style.display = "block";*/
c1Tab1AccBTN.classList.add("active-accordion-btn");
c1Tab1AccBTN.classList.remove.hover("c1-tab1-acc-btn");
/*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
/*c1Tab1AccBTNArrow.classList.add("active-accordion-arrow");
accordionArrow.classList.add("active-accordion-arrow");*/
accordionArrow.style.transform = "rotate(180deg)";
/*accordionArrow.style.display = "none";*/
} else {
/*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
c1Tab1Content.style.height = "0";
c1Tab1Content.style.paddingBottom = "0";
c1Tab1ContentH4.style.height = "0";
c1Tab1ContentP.style.height = "0";
/*c1Tab1Content.style.display = "none";*/
c1Tab1AccBTN.classList.remove("active-accordion-btn");
c1Tab1AccBTN.classList.add.hover("c1-tab1-acc-btn");
/*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
/*c1Tab1AccBTNArrow.classList.remove("active-accordion-arrow");
accordionArrow.classList.remove("active-accordion-arrow");*/
accordionArrow.style.transform = "rotate(0deg)";
}
}
accordionToggle();
body {
background-color: black;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.tabs {
position: relative;
top: 0;
left: 50%;
margin-left: -47.5%;
padding: 0;
width: 95%;
/*max-width: 512px;*/
height: auto;
background: #999;
border-radius: 20px;
box-shadow: 0 12px 16px rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
}
/*#media (min-width: 568.6666666666665px) {
.tabs {
margin-left: -256px;
}
}*/
.c1-tab1 {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
padding: 0;
background: #666;
border-radius: 20px;
}
.c1-tab1-form {
position: relative;
width: 100%;
height: auto;
background: #333;
}
.c1-tab1-acc-cb {
display: block;
position: absolute;
top: -4%;
left: -4%;
}
.c1-tab1-acc-btn {
position: absolute;
left: 50%;
margin-left: calc(-50% - 2.5px);
top: 0;
width: 100%;
height: auto;
font-size: 24px;
z-index: 2;
background: #fff;
color: #1e5cd9;
border: 3px solid #3d1ed9;
border-top-color: #1ebad9;
border-left-color: #1ebad9;
outline: none;
border-radius: 20px 20px 0 0;
/*text-align: center;*/
font-size: calc(0.9375rem + 0.46875vw);
font-weight: 600;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: 0.2s;
}
.c1-tab1-acc-btn:hover {
background: #1e5cd9;
color: #fff;
}
.c1-tab1-acc-btn:active {
border: 3px solid #1ebad9;
border-top-color: #3d1ed9;
border-left-color: #3d1ed9;
box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}
.active-accordion-btn {
background: #1e5cd9;
color: #fff;
border: 3px solid #1ebad9;
border-top-color: #3d1ed9;
border-left-color: #3d1ed9;
box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}
.c1-tab1-acc-btn span:nth-child(1) {
position: relative;
vertical-align: center;
left: 20px;
float: left;
}
.active-accordion-text {
position: relative;
vertical-align: center;
left: 20px;
float: left;
}
/*.c1-tab1-acc-btn span:nth-child(2)*/
.accordion-arrow {
position: relative;
right: 20px;
float: right;
transform: rotate(0deg);
transition: 0.2s;
}
.active-accordion-arrow {
transform: rotate(90deg);
}
.c1-tab1-content {
position: relative;
/*margin-top: 48px;*/
top: 30px;
left: 50%;
margin-left: -50%;
width: 100%;
height: 0;
/*display: none;*/
overflow: hidden;
background: #1e5cd9;
border-radius: 0 0 20px 20px;
box-shadow: 0 12px 16px 0 rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
padding-bottom: 20px;
/*padding: 20px;
box-sizing: border-box;*/
transition-property: height, padding bottom;
transition-duration: 0.2s;
/*transition: height ease 0.2s;*/
}
.c1-tab1-content h4 {
position: relative;
top: 20px;
left: 0;
margin: 0 auto 40px;
height: 0;
transition: height 0.5s ease;
}
.c1-tab1-content p {
position: relative;
top: 0;
left: 0;
text-align: justify;
text-justify: distribute;
line-height: 2;
text-align-last: left;
margin: 20px 20px 0;
height: 0;
transition: height 0.5s ease;
}
<body>
<div class="tabs">
<div class="c1-tab1">
<form class="c1-tab1-form">
<input type="checkbox" class="c1-tab1-acc-cb" id="c1-tab1-acc-cb" />
<label
for="c1-tab1-acc-cb"
class="c1-tab1-acc-btn"
id="c1-tab1-acc-btn"
>
<span>1st Song</span>
<span class="accordion-arrow" id="accordion-arrow">➤</span>
</label>
</form>
<div class="c1-tab1-content" id="c1-tab1-content">
<h4 id="c1-tab1-content-h4">Lorem Ipsum Dolor</h4>
<p id="c1-tab1-content-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>

I want to animate and rotate the arrow symbol and animate the height of the content of the accordion.
In if (c1Tab1AccCB.checked == true) { you have the following line c1Tab1AccBTN.classList.remove.hover("c1-tab1-acc-btn"); why did you put .hover is for your code looks to be vanilla JS not jQuery, remove this so it reads c1Tab1AccBTN.classList.remove("c1-tab1-acc-btn");, furthermore in the else portion of your conditional, you have the following, c1Tab1AccBTN.classList.add.hover("c1-tab1-acc-btn");, again remove the .hover from that line of code and your conditional should work adding/removing the class with the animation to spin the arrow.
var c1Tab1AccCB = document.getElementById("c1-tab1-acc-cb");
var c1Tab1AccBTN = document.getElementById("c1-tab1-acc-btn");
var c1Tab1Content = document.getElementById("c1-tab1-content");
var c1Tab1ContentH4 = document.getElementById("c1-tab1-content-h4");
var c1Tab1ContentP = document.getElementById("c1-tab1-content-p");
var c1Tab1AccBTNArrow = document.querySelector(".c1-tab1-acc-btn span:nth-child(2)");
var accordionArrow = document.getElementById("accordion-arrow");
c1Tab1AccCB.addEventListener("change", function() {
accordionToggle();
});
function accordionToggle() {
if (c1Tab1AccCB.checked == true) {
/*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
c1Tab1Content.style.height = "auto";
c1Tab1Content.style.paddingBottom = "20px";
c1Tab1ContentH4.style.height = "100%";
c1Tab1ContentP.style.height = "100%";
/*c1Tab1Content.style.display = "block";*/
c1Tab1AccBTN.classList.add("active-accordion-btn");
c1Tab1AccBTN.classList.remove("c1-tab1-acc-btn");
/*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
/*c1Tab1AccBTNArrow.classList.add("active-accordion-arrow");
accordionArrow.classList.add("active-accordion-arrow");*/
accordionArrow.style.transform = "rotate(180deg)";
/*accordionArrow.style.display = "none";*/
} else {
/*THIS IS WHERE I WANT THE CONTENT'S HEIGHT TO ANIMATE*/
c1Tab1Content.style.height = "0";
c1Tab1Content.style.paddingBottom = "0";
c1Tab1ContentH4.style.height = "0";
c1Tab1ContentP.style.height = "0";
/*c1Tab1Content.style.display = "none";*/
c1Tab1AccBTN.classList.remove("active-accordion-btn");
c1Tab1AccBTN.classList.add("c1-tab1-acc-btn");
/*THIS IS WHERE I WANT TO USE ADD CLASS OR SET THE PROPERTY OF THE SPAN ELEMENT*/
/*c1Tab1AccBTNArrow.classList.remove("active-accordion-arrow");
accordionArrow.classList.remove("active-accordion-arrow");*/
accordionArrow.style.transform = "rotate(0deg)";
}
}
accordionToggle();
body {
background-color: black;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.tabs {
position: relative;
top: 0;
left: 50%;
margin-left: -47.5%;
padding: 0;
width: 95%;
/*max-width: 512px;*/
height: auto;
background: #999;
border-radius: 20px;
box-shadow: 0 12px 16px rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
}
/*#media (min-width: 568.6666666666665px) {
.tabs {
margin-left: -256px;
}
}*/
.c1-tab1 {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
padding: 0;
background: #666;
border-radius: 20px;
}
.c1-tab1-form {
position: relative;
width: 100%;
height: auto;
background: #333;
}
.c1-tab1-acc-cb {
display: block;
position: absolute;
top: -4%;
left: -4%;
}
.c1-tab1-acc-btn {
position: absolute;
left: 50%;
margin-left: calc(-50% - 2.5px);
top: 0;
width: 100%;
height: auto;
font-size: 24px;
z-index: 2;
background: #fff;
color: #1e5cd9;
border: 3px solid #3d1ed9;
border-top-color: #1ebad9;
border-left-color: #1ebad9;
outline: none;
border-radius: 20px 20px 0 0;
/*text-align: center;*/
font-size: calc(0.9375rem + 0.46875vw);
font-weight: 600;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: 0.2s;
}
.c1-tab1-acc-btn:hover {
background: #1e5cd9;
color: #fff;
}
.c1-tab1-acc-btn:active {
border: 3px solid #1ebad9;
border-top-color: #3d1ed9;
border-left-color: #3d1ed9;
box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}
.active-accordion-btn {
background: #1e5cd9;
color: #fff;
border: 3px solid #1ebad9;
border-top-color: #3d1ed9;
border-left-color: #3d1ed9;
box-shadow: 0 6px 8px 0 rgb(0, 0, 0, 0.2) inset, 0 17px 12.5px 0 rgb(0, 0, 0, 0.19) inset;
}
.c1-tab1-acc-btn span:nth-child(1) {
position: relative;
vertical-align: center;
left: 20px;
float: left;
}
.active-accordion-text {
position: relative;
vertical-align: center;
left: 20px;
float: left;
}
/*.c1-tab1-acc-btn span:nth-child(2)*/
.accordion-arrow {
position: relative;
right: 20px;
float: right;
transform: rotate(0deg);
transition: 0.2s;
}
.active-accordion-arrow {
transform: rotate(90deg);
}
.c1-tab1-content {
position: relative;
/*margin-top: 48px;*/
top: 30px;
left: 50%;
margin-left: -50%;
width: 100%;
height: 0;
/*display: none;*/
overflow: hidden;
background: #1e5cd9;
border-radius: 0 0 20px 20px;
box-shadow: 0 12px 16px 0 rgb(0, 0, 0, 0.2), 0 17px 50px 0 rgb(0, 0, 0, 0.19);
padding-bottom: 20px;
/*padding: 20px;
box-sizing: border-box;*/
transition-property: height, padding bottom;
transition-duration: 0.2s;
/*transition: height ease 0.2s;*/
}
.c1-tab1-content h4 {
position: relative;
top: 20px;
left: 0;
margin: 0 auto 40px;
height: 0;
transition: height 0.5s ease;
}
.c1-tab1-content p {
position: relative;
top: 0;
left: 0;
text-align: justify;
text-justify: distribute;
line-height: 2;
text-align-last: left;
margin: 20px 20px 0;
height: 0;
transition: height 0.5s ease;
}
<body>
<div class="tabs">
<div class="c1-tab1">
<form class="c1-tab1-form">
<input type="checkbox" class="c1-tab1-acc-cb" id="c1-tab1-acc-cb" />
<label
for="c1-tab1-acc-cb"
class="c1-tab1-acc-btn"
id="c1-tab1-acc-btn"
>
<span>1st Song</span>
<span class="accordion-arrow" id="accordion-arrow">➤</span>
</label>
</form>
<div class="c1-tab1-content" id="c1-tab1-content">
<h4 id="c1-tab1-content-h4">Lorem Ipsum Dolor</h4>
<p id="c1-tab1-content-p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>

How to mouseover on container to show read-more button with Javascript?

I have made a HTML page, in that when I hover on the container class, I wanted the read-more class to be displayed or else it should be hidden.
I've tried a lot but I'm unable to figure out it!
If you know, please make it for me!!
I'm even OK with JQuery
HTML Code
HTML
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn">Read More</a>
</div>
</div>
</div>
</div>
CSS Code
CSS
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
JavaScript Code
JAVASCRIPT
????????

If you NEED javascript, just add an event listener to the <div>.
Here is an example:
document.getElementById("info").addEventListener("mouseover", function() {
document.getElementById("auBtn").style = "display: block;";
});
document.getElementById("info").addEventListener("mouseout", function() {
document.getElementById("auBtn").style = "display: none;";
});
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info" id="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn" style="display: none;" id="_id">Read More</a>
</div>
</div>
</div>
</div>
A living demo: https://codepen.io/marchmello/pen/mdJNNQV?editors=1010
Or you can add some transitions by using both of functions hide() and fadeToggle() in jQuery:
$("#auBtn").hide();
$("#info").hover(function() {
$("#auBtn").fadeToggle(400);
});
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info" id="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn" id="_id">Read More</a>
</div>
</div>
</div>
</div>
Living demo: https://codepen.io/marchmello/pen/ExVYYjz

You can also do it with CSS as
<!DOCTYPE html>
<html>
<style>
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.details{
position : relative;
}
.tooltip {
visibility : hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 43px;
left: 84%;
margin-left: -60px;
}
.tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.details:hover .tooltip {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class = "details">
<a class="read-more" href="#" id="auBtn">Read More</a>
<span class ="tooltip">Read</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Note : For more details https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top

How do I create a sliding side navbar that dims the rest of the website when open?

So basically I have a website and I have the layout in a way I want it to and I need to make a side navbar that slides open while dimming the rest of the page. but when I put my code together it only dims certain parts of my website instead of the whole thing. what am I doing wrong?
So basically I have a website and I have the layout in a way I want it to and I need to make a side navbar that slides open while dimming the rest of the page. but when I put my code together it only dims certain page of my website instead of the whole thing. what am I doing wrong?
here is the website https://thimbleprojects.org/wjtw9802/678158
HTML
<html>
<div id="myDiv">
<div id="main">
<body id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h1>My Website</h1>
<p style="text-align: right;">Resize the browser window to see the effect.</p>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="row">
<div class="leftcolumn">
<div class="card" id="myDiv">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</div>
</div>
</html>
CSS
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #ffffff;
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.leftcolumn {
float: right;
width: 100%;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: #d7cec7;
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JAVASCRIPT
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("myDiv").style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("myDiv").style.backgroundColor = "white";
}

The main issue is that you are solely affecting the background color of the main body tag on which are overlaid all you're other components.
The best way to proceed would be to add another div outside of your main div. Let's call it overlay that container will sit on top of all the other ones giving you the dim effect.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("overlay").style.display = "block";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("overlay").style.display = "none";
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #ffffff;
}
#overlay {
margin-left:250px;
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.leftcolumn {
float: right;
width: 100%;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: #d7cec7;
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JAVASCRIPT
<html>
<div id="myDiv">
<div id="overlay"></div>
<div id="main">
<body id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h1>My Website</h1>
<p style="text-align: right;">Resize the browser window to see the effect.</p>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="row">
<div class="leftcolumn">
<div class="card" id="myDiv">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</div>
</div>
</html>

Smoothly scroll on click / ul li / jQuery

I'm having trouble with a "Q&A" section. Like there's 4 questions, that are links.
If you click on one, a "p" is going to slide down. an so on. But i want the page to scroll down or up to be well placed (like top) when you click on the question.
$(function() {
var $_openedFaq = null;
function openFaq($__p) {
$__p.slideDown();
}
function closeFaq($__p) {
$__p.slideUp();
}
$('.faq ul li').each(function() {
var $faq = $(this);
var $p = $(this).find('p');
$(this).find('a').click(function(e) {
e.preventDefault();
if ($_openedFaq != null) {
closeFaq($_openedFaq.find('p'));
$_openedFaq.find('a').removeClass("open");
}
if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
openFaq($p);
$_openedFaq = $faq;
$p.prev('a').addClass("open");
} else {
$_openedFaq = null;
}
});
});
});
.faq {
background-color: #f5f5f5;
padding-top: 65px;
padding-bottom: 65px;
}
.faq div.container div.row div.col-sm-6 h1 {
font-family: 'Source Serif Pro', serif;
text-align: center;
font-size: 60px;
margin: 0;
padding-bottom: 40px;
}
.faq div.container div.row div.col-sm-6 ul {
list-style-type: none;
padding: 0;
}
.faq div.container div.row div.col-sm-6 ul li {
font-weight: bold;
font-size: 14px;
padding: 10px 10px;
padding-top: 20px;
border-bottom: 1px solid #bfbfbf;
position: relative;
}
.faq div.container div.row div.col-sm-6 ul li:last-child {
border-bottom: none;
}
.faq div.container div.row div.col-sm-6 ul li a {
text-decoration: none;
color: #4a4a4a;
padding-right: auto;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a:hover {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a:hover::after {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a::after {
content: "\e008";
font-family: "road-trip-project-icons";
color: #f9b40a;
position: absolute;
top: 20px;
right: 0;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a.open {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a.open::after {
content: "\e007";
font-family: "road-trip-project-icons";
color: black;
position: absolute;
top: 20px;
right: 0;
}
.faq div.container div.row div.col-sm-6 ul li p {
font-weight: normal;
display: none;
}
.faq div.container div.row div.col-sm-6 img {
width: 100%;
}
.faq {
padding-top: 200px;
height: 750px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="faq">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Q&As</h1>
<ul>
<li>
Question 1
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 2
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 3
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 4
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<img src="../includes/img/faqs.jpg" alt="Are you ready ?">
</div>
</div>
</div>
</section>
So when you click on "Question 1" i want the page to scroll until she's well placed in comparaison with the question 1. Sorry for my awful english ^^
Thank you.

$(document).on('click', 'a[href^="#"]', function ( (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
href is the id of target

You can collect offset top of each element li by:
var offset = $(this).offset().top;
Then for smooth scroll use this:
$('html, body').animate({
scrollTop: offset
}, 1000);
Demo:
$(function() {
var $_openedFaq = null;
function openFaq($__p) {
$__p.slideDown();
}
function closeFaq($__p) {
$__p.slideUp();
}
$('.faq ul li').each(function() {
var $faq = $(this);
var $p = $(this).find('p');
var offset = $(this).offset().top;
$(this).find('a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: offset
}, 1000);
if ($_openedFaq != null) {
closeFaq($_openedFaq.find('p'));
$_openedFaq.find('a').removeClass("open");
}
if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
openFaq($p);
$_openedFaq = $faq;
$p.prev('a').addClass("open");
} else {
$_openedFaq = null;
}
});
});
});
#charset "UTF-8";
#font-face {
font-family: 'Conv_Besom';
src: url("../font/Besom.eot");
src: local("☺"), url("../font/Besom.woff") format("woff"), url("../font/Besom.ttf") format("truetype"), url("../font/Besom.svg") format("svg");
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
font-size: 14px;
font-weight: 500;
}
section {
background-color: #f9b40a;
}
/* ################### */
/* ##### NAV BAR ##### */
/* ################### */
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
text-transform: uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
z-index: 1000;
}
#media only screen and (max-width: 740px) {
header.navbar {
background-color: black;
}
}
header nav {
position: absolute;
top: 50%;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 40px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header nav ul {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
padding-left: 20px;
padding-right: 20px;
}
header nav ul+ul {
border-left: 1px solid white;
}
#media only screen and (max-width: 740px) {
header nav ul+ul {
border: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
header nav ul li+li {
margin-left: 25px;
}
header nav ul.menuIco li+li {
margin-left: 12px;
}
header nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
header nav ul li a:hover {
color: #f9b40a;
}
header nav ul.menuIco {
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#media only screen and (max-width: 740px) {
header nav ul.menuIco {
background-color: #f9b40a;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
}
header nav ul.menuIco li a:hover {
color: black;
}
#media only screen and (max-width: 740px) {
header nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0;
margin-top: 128px;
width: 100%;
border-top: 0.5px solid white;
z-index: 5;
background-color: black;
}
}
#media only screen and (max-width: 740px) {
header nav ul:first-child {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
padding-left: 35px;
}
}
#media only screen and (max-width: 740px) {
header nav ul:first-child li {
margin: 0;
margin-top: 10px;
margin-bottom: 10px;
}
}
#media only screen and (max-width: 740px) {
header nav ul:first-child li:first-child {
margin-top: 20px;
}
}
header h1 {
margin: 0;
margin-left: 50px;
}
header h1 a {
display: block;
text-decoration: none;
color: white;
text-indent: -6000px;
background: url("../img/rtp-inline-w.svg") no-repeat;
width: 149px;
height: 22px;
}
#media only screen and (max-width: 740px) {
header h1 {
margin-left: 30px;
}
}
/* ################## */
/* ##### SLIDER ##### */
/* ################## */
section div.slider {
background: url("../img/banner.jpg") no-repeat center;
background-size: cover;
padding-top: 127px;
padding-bottom: 65px;
color: white;
text-align: center;
font-size: 35px;
font-family: 'Source Serif Pro', serif;
margin: auto;
position: relative;
}
section div.slider::after {
content: "";
background: url("../img/eu-pin.svg");
position: absolute;
width: 29px;
height: 39px;
bottom: 40px;
right: 40px;
}
section div.slider::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
section div.slider div.container {
position: relative;
}
section div.slider div.container img {
width: 200px;
}
.article {
display: block;
}
/* ####################################### */
/* ##### APPLICATIONS ARE NOW CLOSED ##### */
/* ####################################### */
section div.closed {
padding-bottom: 65px;
}
section div.closed div.row div.closed--container {
margin-top: 65px;
}
section div.closed div.row div.closed--container h1 {
font-family: 'Conv_Besom';
padding: 0;
margin: 0;
margin-bottom: 50px;
font-size: 40px;
font-weight: normal;
color: white;
}
section div.closed div.row div.closed--container img {
width: 300px;
display: block;
margin: auto;
padding-bottom: 40px;
}
/* ################## */
/* ##### FOOTER ##### */
/* ################## */
footer {
background-color: #f9b40a;
padding-top: 50px;
padding-bottom: 55px;
text-transform: uppercase;
}
footer div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
footer div p {
font-size: 14px;
}
footer div p a {
text-decoration: none;
color: black;
font-weight: bold;
}
footer div p:last-child {
margin-left: 80px;
}
footer div p+p {
margin-left: 35px;
}
footer div p.copyright {
position: relative;
padding-left: 42px;
}
footer div p.copyright::before {
content: "";
background: url("../img/eu-flag.svg");
width: 33px;
height: 22px;
position: absolute;
top: -3px;
left: 0;
}
footer div p.mail {
position: relative;
}
footer div p.mail::before {
content: "\e004";
font-family: "road-trip-project-icons";
font-size: 45px;
position: absolute;
top: -18px;
left: -50px;
}
footer div h1 {
display: block;
text-decoration: none;
color: white;
text-indent: -6000px;
background: url("../img/rtp-inline-w.svg") no-repeat;
width: 183px;
height: 27px;
}
footer div.hashtag {
font-size: 13px;
}
#media only screen and (max-width: 650px) {
footer div {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
footer ul {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
margin-bottom: 20px;
}
footer ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 30px;
background-color: black;
border-radius: 50%;
width: 54px;
height: 54px;
position: relative;
}
footer ul li a i {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
footer ul li+li {
margin-left: 30px;
}
/* ##################### */
/* ##### HAMBURGER ##### */
/* ##################### */
button.hamburger {
position: absolute;
right: 15px;
top: 6px;
z-index: 5;
visibility: hidden;
}
#media only screen and (max-width: 740px) {
button.hamburger {
visibility: visible;
}
}
/* ##################### */
/* ##### TRIP LIST ##### */
/* ##################### */
section.triplist {
padding-top: 65px;
padding-bottom: 65px;
background-color: white;
}
#media only screen and (max-width: 740px) {
.route-item {
margin-top: 50px;
}
}
.route-item div.divIco {
position: relative;
padding-left: 35px;
padding-right: 35px;
}
.route-item div.divIco img {
display: block;
border-radius: 50%;
width: 100%;
height: auto;
}
.route-item div.divIco::before {
font-family: "road-trip-project-icons";
content: "\e006";
position: absolute;
font-size: 40px;
top: 0;
left: 30px;
color: white;
z-index: 2;
background-color: black;
text-align: center;
width: 75px;
height: 75px;
border-radius: 50%;
line-height: 75px;
}
.route-item div {
width: 100%;
}
.route-item div span.routesDate {
display: block;
text-align: center;
margin-top: 25px;
font-weight: bold;
}
.route-item div div {
text-align: center;
}
.route-item div div a {
text-decoration: none;
font-family: 'Conv_Besom';
color: black;
font-size: 25px;
line-height: 1.5em;
}
.route-item div span.startEnd {
padding-left: 25px;
position: relative;
margin-top: 5px;
display: block;
}
.route-item div span.startEnd::before {
font-family: "road-trip-project-icons";
content: "\e006";
font-size: 17px;
position: absolute;
top: -2px;
left: 0;
}
.route-item div span.startEnd span {
font-weight: lighter;
}
.route-item p {
margin-top: 50px;
margin-bottom: 50px;
font-weight: lighter;
}
.route-item a.button {
display: block;
width: 100%;
height: 46px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
line-height: 46px;
border-radius: 23px;
text-transform: uppercase;
}
.route-item.route-item--c01 a {
color: #f9b40a;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c01 a:hover {
color: #b28004;
}
.route-item.route-item--c01 div.divIco::before {
background-color: #f9b40a;
}
.route-item.route-item--c01 a.button {
color: white;
background-color: #f9b40a;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c01 a.button:hover {
background-color: #b28004;
}
.route-item.route-item--c01 span.startEnd::before {
color: #f9b40a;
}
.route-item.route-item--c02 a {
color: #1f7089;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c02 a:hover {
color: #113d4b;
}
.route-item.route-item--c02 div.divIco::before {
background-color: #1f7089;
}
.route-item.route-item--c02 a.button {
color: white;
background-color: #1f7089;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c02 a.button:hover {
background-color: #113d4b;
}
.route-item.route-item--c02 span.startEnd::before {
color: #1f7089;
}
.route-item.route-item--c03 a {
color: #01c191;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c03 a:hover {
color: #017558;
}
.route-item.route-item--c03 div.divIco::before {
background-color: #01c191;
}
.route-item.route-item--c03 a.button {
color: white;
background-color: #01c191;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c03 a.button:hover {
background-color: #017558;
}
.route-item.route-item--c03 span.startEnd::before {
color: #01c191;
}
.route-item.route-item--c04 a {
color: #97754f;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c04 a:hover {
color: #654e35;
}
.route-item.route-item--c04 div.divIco::before {
background-color: #97754f;
}
.route-item.route-item--c04 a.button {
color: white;
background-color: #97754f;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c04 a.button:hover {
background-color: #654e35;
}
.route-item.route-item--c04 span.startEnd::before {
color: #97754f;
}
/* ############### */
/* ##### FAQ ##### */
/* ############### */
.faq {
background-color: #f5f5f5;
padding-top: 65px;
padding-bottom: 65px;
}
.faq div.container div.row div.col-sm-6 h1 {
font-family: 'Source Serif Pro', serif;
text-align: center;
font-size: 60px;
margin: 0;
padding-bottom: 40px;
}
.faq div.container div.row div.col-sm-6 ul {
list-style-type: none;
padding: 0;
}
.faq div.container div.row div.col-sm-6 ul li {
font-weight: bold;
font-size: 14px;
padding: 10px 10px;
padding-top: 20px;
border-bottom: 1px solid #bfbfbf;
position: relative;
}
.faq div.container div.row div.col-sm-6 ul li:last-child {
border-bottom: none;
}
.faq div.container div.row div.col-sm-6 ul li a {
text-decoration: none;
color: #4a4a4a;
padding-right: auto;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a:hover {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a:hover::after {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a::after {
content: "\e008";
font-family: "road-trip-project-icons";
color: #f9b40a;
position: absolute;
top: 20px;
right: 0;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a.open {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a.open::after {
content: "\e007";
font-family: "road-trip-project-icons";
color: black;
position: absolute;
top: 20px;
right: 0;
}
.faq div.container div.row div.col-sm-6 ul li p {
font-weight: normal;
display: none;
}
.faq div.container div.row div.col-sm-6 img {
width: 100%;
}
.faq {
padding-top: 200px;
height: 750px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="faq">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Q&As</h1>
<ul>
<li>
Question 1
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 2
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 3
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 4
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<img src="../includes/img/faqs.jpg" alt="Are you ready ?">
</div>
</div>
</div>
</section>

weird whole screen white flashes when animating using css transition and transform

The Code: http://jsfiddle.net/techsin/zLA8j/4/show
For some reason when you click the button and as animation is about to finish a white falsh appears for no reason. I can't debug it. I need help. But sometimes There is no problem.
$('.btn').click(
function(){
var t= $(this);
t.css('transform','scale(.9)');
setTimeout(function(){t.css('transform','');},600);
}
);
html---
<div class="con">
<div class="con2">
<div class="pop">
<header>Would you like to be Awesome?</header>
<div class="txt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat totam quos quisquam in iure ea provident asperiores nesciunt assumenda autem sequi expedita quae reiciendis labore vitae aspernatur eaque repellat quis.</p>
</div>
</div>
<div class="btns">
css---
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: rgb(245, 246, 247);
width: 100%;
display: table;
}
.con {
display: table-cell;
vertical-align: middle;
}
.con2 {
display: table;
margin: auto;
}
.pop {
min-width: 300px;
border-radius:3px;
border:1px solid rgb(218, 218, 218);
position: relative;
height: 250px;
background-color: rgb(252, 253, 255);
}
.pop header {
height: 50px; line-height: 50px;
background-color: rgb(248, 248, 248);
position: relative;
padding-left: 15px;
font-family: sans-serif;
font-weight: bold;
color: rgb(123, 123, 134);;
}
.pop header:after {
content:'';
position: absolute;
height: 1px;
background: rgb(207, 207, 207);
left: 0;
width: 100%;
bottom: 0;
}
.btn {
-webkit-transition: all .2s ease-in-out;;
height: 48px;
width: 95px;
background-color: rgb(117, 117, 117);
border-radius:3px;
text-align: center;
line-height: 48px;
font-family: sans-serif;
color:white;
font-size: 15px;
display: inline-block;
margin: 0 5px;
cursor:default;
}
.btns {
width:300px;
text-align: center;
margin: auto;
margin-top: 11px;
}
.btn:hover { -webkit-transform: scale(1.1); }
.dec {background-color: rgb(70, 182, 151); }
.txt {
/* border:1px solid; */
text-align: center;
padding: 15px;
}
.txt p {
text-align: left;
width: 250px;
font-family: sans-serif;
font-size: 14px;
line-height: 22px;
margin: auto;
}