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

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

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

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

Related

DOM Manipulation modal window error with open button

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

Popup Accordions not working With jQuery?

I am making a popup modal box in which when the user click on more information new modal box again popup on the same page but it's not working properly I have tried everything,Example of Popup Modal if you click more information new box open ups, I am trying something like this.
Also please hide the popup on accept and deny button and set a cookie for popup
CSS
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < /script>
$(document).ready(function() {
$(".footerr ul li:last-child").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'none');
$(".serviceMainContent1").css('display', 'block');
})
$("#closeInfoBtn").click(function(e) {
e.preventDefault();
$('#popUpContain').css('display', 'block');
$(".serviceMainContent1").css('display', 'none');
})
$(".cat_btn").click(function(e) {
e.preventDefault();
$(".serv_btn a").css({
"color": "#303030"
});
$(".serv_btn").css({
"border-bottom": "none"
});
$('#services1').css('display', 'none');
$("#category").css('display', 'block');
$(".cat_btn a").css({
"color": "blue"
});
$(".cat_btn").css({
"border-bottom": "2px solid blue"
});
});
$(".serv_btn").click(function(e) {
e.preventDefault();
$(".cat_btn a").css({
"color": "#303030"
});
$(".cat_btn").css({
"border-bottom": "none"
});
$("#category").css('display', 'none');
$('#services1').css('display', 'block');
$(".serv_btn a").css({
"color": "blue"
});
$(".serv_btn").css({
"border-bottom": "2px solid blue"
});
})
var acc = document.getElementsByClassName("accordion1");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.popUp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
display: block;
background-color: white;
}
#language {
width: 57px;
padding: 4px;
border: 1px solid #dbdbdb;
}
.header1 {
display: flex;
justify-content: flex-end;
}
.container1,
.serviceMainContent1 {
display: flex;
flex-direction: column;
width: 595px;
padding: 14px;
box-shadow: -1px 16px 34px 2px #dbdbdb;
border-radius: 7px;
}
.bodyy h3 {
color: #303030;
}
.bodyy p {
line-height: 19px;
margin-top: 10px;
font-size: 13px;
}
.footerr>a {
padding: 7px 90px;
border-radius: 9px;
margin: 0px 10px;
}
.footerr>.deny {
background-color: #ededed;
color: #303030;
}
.footerr>.accept {
background-color: #0096FF;
color: #fff;
}
.footerr>.deny:hover {
background-color: #f4f2f2;
}
.footerr>.accept:hover {
background-color: #4eabf7;
}
.footerr>a:hover {
text-decoration: none;
}
.footerr>p {
text-align: center;
padding-top: 10px;
font-size: 12px;
}
.footerr>ul {
display: flex;
list-style: none;
font-size: 13px;
}
.footerr>ul li {
padding-right: 10px;
color: #c4c2c2;
}
/* more information css */
.serviceMainContent1 {
height: 654px;
overflow-y: scroll;
display: none;
}
.header1 a {
font-size: 20px;
width: 40px;
text-align: center;
}
.header1 a:hover {
text-decoration: none;
color: #303030;
}
.categoryServices1 {
height: 436px;
width: 563px;
overflow-y: scroll;
background-color: #f8f7f7;
}
.cat_serv_btn,
.footerBtn {
display: flex;
text-align: center;
}
.cat_serv_btn .cat_btn,
.cat_serv_btn .serv_btn,
.footerBtn a {
width: 50%;
}
.cat_btn,
.serv_btn {
padding: 10px 0px;
}
.cat_btn:active,
.serv_btn:active {
border-bottom: 2px solid blue;
}
.cat_btn a:active,
.serv_btn a:active {
color: blue;
}
.cat_btn a:hover,
.serv_btn a:hover {
text-decoration: none;
}
.bodyy span {
padding: 20px 20px 20px 0;
}
.bodyy a,
.bodyy i {
font-size: 13px;
}
.footerBtn a {
padding: 5px 0px;
border-radius: 5px;
margin: 0px 10px;
color: #303030;
}
.footerBtn a:hover {
text-decoration: none;
}
.footerBtn .save,
.footerBtn .deny {
background-color: #f5f5f5;
}
.footerBtn .save:hover,
.footerBtn .deny:hover {
background-color: #e7e6e6;
}
.footerBtn .close {
background-color: #0096FF;
color: #fff;
}
.footerBtn .close:hover {
background-color: #4eabf7;
}
/* switch buttons */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider1 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider1:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider1 {
background-color: #2196F3;
}
input:focus+.slider1 {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider1:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider1.round {
border-radius: 34px;
}
.slider1.round:before {
border-radius: 50%;
}
/* accordions */
.accordion1 {
margin: 20px 0px;
width: 500px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.accordion1 div p {
font-size: 13px;
}
.accordion1 {
display: flex;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion1:hover {
background-color: #fff;
}
.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
font-size: 13px;
}
#services1 {
display: none;
}
/* media query for mobile device */
#media only screen and (max-width: 600px) {
.container {
width: 400px;
}
.footerr>a {
padding: 5px 40px;
}
}
<div class="popUp">
<div class="container1" id="popUpContain">
<div class="header1">
<img src="img/logo.png" alt="" width="20">
<div style="margin-right: auto; margin-left: 10px;"><b>BCT-Touristik</b></div>
<!-- <select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
</select> -->
</div>
<div class="bodyy">
<h3>We value your privacy</h3>
<p>We and our partners are using technologies like Cookies or Targeting and process personal data like IP-address or browser information in order to personalize the advertisement you see. This helps us to show you more relevant ads and improves your
internet experience. We also use it in order to measure results or align our website content. Because we value your privacy, we are herewith asking your permission to use the following technologies. You can always change/withdraw your consent
later by clicking on the settings button on the left lower corner of the page.</p>
</div><br>
<div class="footerr">
<ul>
<li><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</li>
<li><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Travel Condition</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> More information</li>
</ul><br>
<b>Deny</b>
<b>Accept and close</b>
<p>Powered by BCT-Touristik</p>
</div>
</div>
<div class="serviceMainContent1">
<div class="headerBody">
<div class="header1">
<img src="" alt="">
<select name="" id="language">
<option value="DE">DE</option>
<option value="EN">EN</option>
<option value="PT">PT</option>
</select>
✖
</div>
<div class="bodyy">
<h3>Privacy Settings</h3>
<p>This tool helps you to select and deactivate various tags / trackers / analysis tools used on this website. </p>
<span><i class="fa fa-link" aria-hidden="true"></i> Privacy Policy</span>
<span><i class="fa fa-link" aria-hidden="true"></i> Legal Notice</span>
</div>
<div class="cat_serv_btn">
<div class="cat_btn">
<b>Categories</b>
</div>
<div class="serv_btn">
<b>Services</b>
</div>
</div>
<div class="categoryServices1">
<div id="category1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<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>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<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>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<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>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Functional</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<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>
</div>
</div>
<div id="services1">
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<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>
</div>
<div class="accordion2">
<div class="accordion1">
<div>
<h5>Services</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi at assumenda laborum rem fugiat accusamus voluptatem minus officiis eius, repellendus consequatur temporib</p>
</div>
<div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider1 round"></span>
</label>
</div>
</div>
<div class="panel">
<hr>
<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>
</div>
</div>
</div>
<div class="footer">
<br>
<div class="footerBtn">
<a class="save" href=""><b>Save</b></a>
<a class="deny" href=""><b>Deny</b></a>
<a class="close" href=""><b>Accept and close</b></a>
</div>
<p>Powered by Usercentrics Consent Management</p>
</div>
</div>
</div>
</div>
</div>
Suggest me where I am going wrong in this I need to open another modal box on more info click?

How can I close an accordion on mobile?

I have an accordion using just HTML and CSS (no JS).
For desktop, I hover over to expand, and remove the mouse to close the panel.
For mobile, I click to expand, but clicking on the same object doesn't close it. I have to click on the white space to close the panel, which isn't intuitive.
QUESTION: How can I write this code so I click on the accordion to close the panel?...is JS the only way?
HTML
<div class="slider-containers">
<!--effect #1 -->
<div class="slider-container">
<div class="flexbox-slider flexbox-slider-1">
<div class="flexbox-slide">
<div class="img-overlay"><div class="start">ENGAGE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1464213/pexels-photo-1464213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Engage</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
<div class="slide-bottom"></div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EDUCATE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1350615/pexels-photo-1350615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Educate</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EMPOWER<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Empower</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
CSS
$slider-height: 500px;
$text-block-width: 400px;
$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;
//transitions and mixins
//transitions mixin
#mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
}
//position absolute mixin
#mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
.container {
width: 1100px;
margin: 50px auto 0;
}
.link {
display: flex;
justify-content: center;
width: 800px;
margin: 30px auto 0;
a {
#include transition-mix;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 40px;
color: inherit;
font: {
size: inherit;
}
text-decoration: none;
&:hover {
color: $accent-font-color;
}
&:last-child {
margin-right: 0;
}
i {
color: $accent-font-color;
margin-right: 9px;
font-size: 30px;
}
}
}
.slider-containers {
width: 100%;
margin: 60px ;
}
.slider-container {
margin-bottom: 60px;
h2 {
text-align: center;
}
}
.flexbox-slider {
margin-top: 50px;
}
.flexbox-slider {
display: flex;
width: 100%;
height: $slider-height;
visibility: hidden;
.flexbox-slide {
#include transition-mix($duration: .3s);
width: 33%;
height: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
visibility: visible;
transform: skewx(-8deg);
//overlay
&:after {
#include position-absolute($top: 0, $left: 0);
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
z-index: 2;
opacity: 0;
}
img {
#include position-absolute($top: 50%, $left: 50%);
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}
.text-block {
#include position-absolute($bottom: 30px, $left: 30px);
max-width: $text-block-width;
padding: 20px;
border-radius: 5px;
background-color: rgba($text-overlay-color, $text-overlay-opacity);
color: $light-font-color;
z-index: 4;
visibility: hidden;
opacity: 0;
h3 {
font: {
size: 20px;
weight: 700;
}
}
}
}
&:hover {
.flexbox-slide:hover {
flex-shrink: 0;
width: 80%;
}
}
}
/* effect */
.flexbox-slider.flexbox-slider-1 {
.flexbox-slide {
.text-block {
bottom: 60px;
}
}
&:hover {
.start {visibility:hidden}
.flexbox-slide:hover {
.text-block {
#include transition-mix($delay: .5s);
bottom: 30px;
opacity: 1;
visibility: visible;
}
}
}
}
.start {font-weight: bold; color: #fbaf17; font-size: 150%; z-index:1000; padding: 45% 20%;
}
img.panel-img {height:500px !important; }
.img-overlay {
width: 100%;
height: 100%;
background: rgba(51,85,153,.9);
}
.flexbox-slide {border-right: dashed 4px gold;}
.flexbox-slide:last-child {border-right: 0px}
#accordion-expand, .slide-bottom {visibility: hidden}
#media (max-width:960px) {
.flexbox-slider {
flex-direction: column;
height: 200px;
.flexbox-slide {
margin: auto;
width: 75%;
height: 200px !important;
transform: skewX(0deg);
}
.flexbox-slide {border-right: none;}
}
#accordion-expand {float:right; visibility: visible}
.start {margin: 0 20px; padding: 20px; border-bottom: solid 2px gold;}
}
Here's my codepen

Sliding Animation Stutters in Accordion

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

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

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

Expand a Div Using jQuery

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

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

We Keep Coding

JavaScript is the programming language of the Web.

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

Related

DOM Manipulation modal window error with open button

Popup Accordions not working With jQuery?

How can I close an accordion on mobile?

Sliding Animation Stutters in Accordion

Expand a Div Using jQuery

Categories

Resources