hi I am building a button where hide/show content when click on, however when I apply some styles to the content it won't hide anymore, I suspect it has got something to do with the css position, but can't figure it out why, could someone please help me? thanks in advance
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
button.accordion {
background-color: #13294b;
border: 2px solid #59cbe8;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #1f447b;
}
button.accordion:after {
content: '\002B';
color: #59cbe8;
font-weight: bold;
float: right;
}
button.accordion.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.action1 {
position: absolute;
margin-top: -115px;
margin-left: 35px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
.action2 {
position: absolute;
margin-top: -115px;
margin-left: 175px;
width: 100%;
color: #c1c1c1;
font-size: 14px;
font-weight: bold;
}
<button class="accordion">This is the button</button>
<div class="panel">
<p><img width="650" height="114" style="border: 0px solid rgb(0, 0, 0); border-image: none;" src="./?a=654193" /><br /></p>
<p class="action1">Recognise</p>
<p class="action2">Remove from play</p>
</div>
Your paragraphs are absolutely positioned, but not relative to the panel that is hiding/showing. To position those relative to .panel, add position: relative to .panel, and the paragraphs will hide/show with `.panel.
Related
I have written some code that I want to apply to the site logo.
Please see below the full code script that includes html CSS and JavaScript. If you go to this page you can see that code in action on the second rotating logo: https://lutodigital.com/test2/
Please could you help me with what I'd need to do to apply this code to the site logo? Essentially turning the logo into a dropbutton with extras and adding the rotation to it so the site logo behaves in the same way that the below set of code does.
Thank you very much!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:hover {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:focus {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.panel {
color: black;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #00000000;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 12px!important;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 0px 0px 0px 10px;
margin: 0px 0px 0px 11px;
}
.link {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
.link:hover {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
hr.solid {
border-left: none;
border-right: none;
border-top: 1px solid #000000;
border-bottom: none;
max-width: 200px;
margin-left: 15px;
padding-top: 5px;
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
.dropbtn:hover {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
.dropbtn:focus {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
outline: none;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
#keyframes logo {
from {width: 125px; height: 125px; transform: rotate(0deg)}
to {width: 125px; height: 125px; transform: rotate(360deg);}
}
#myDropdown > div {
display: none
}
#myDropdown.show > div {
display: block
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Luto Digital:</button>
<div id="myDropdown">
<div>
<hr class="solid">
<div class="accordion-div">
<button class="accordion"><span class="faq__question-heading">About</span></button>
<div class="panel">
<p style="padding:18px 0;">We are the decisive factor behind your digital growth & success.<br><br>In a world of change overwhelmed with opinion, we can't be everything to everyone, but we can be everything to someone. We don't compromise on what really matters.<br><br>We deliver value through collaboration.</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Services</span></button>
<div class="panel">
<p style="padding:18px 0;">Digital Marketing . Strategic Thinking & Digital Consultancy . Website Design & Development . Omnichannel Execution . Video Content Creation & Editing . Behind The Scenes Video Editing . Destination Video Editing . SEO Services . Email Marketing . Social Content Strategy . Social Media Management . Content Marketing . Market Research . User Behaviour & Competitor Analysis . PPC Advert Management . Digital Audits . Data, Insights & Analytics</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Clients</span></button>
<div class="panel">
<p style="padding:18px 0;">WPJ Heating . Dove Men+Care . Collaborative Creations . Off The Wall Prints . Unilever . CompareCaribbean.com . Vision Salons . Boof Tennis . TRESemmé . Clipfix . Fit Within . Knorr . 31 Salon . Cindarella . Magnum . Wowo Campsite . Eastside Primetimers . AMP Agency . Boys Cry</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Reviews</span></button>
<div class="panel">
<p style="padding:18px 0;"></p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:hello#lutodigital.com">Talk to Us</a></span></button>
<div class="panel"></div>
</div>
<hr class="solid">
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>
I'm trying to create some nested accordions using CSS, html, and Javascript. Everything was working as intended until I attempted to add sliding animations, they do slide, but now the maxHeight isn't adjusted to account for the height of the elements inside of it, and as such the elements overlap and can't be seen properly.
Can I update the maxHeight of each element only when the button is active to achieve the desired result, and if so, what would be the best way to accomplish that?
var buttonListLB = document.getElementsByClassName("button-lightblue");
var buttonListB = document.getElementsByClassName("button-blue");
var buttonListDB = document.getElementsByClassName("button-darkblue");
var i;
var j;
var k;
function openDropbox() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") { //The parent's status should be considered here
panel.style.display = "none";
panel.style.maxHeight = null;
} else {
panel.style.display = "block";
panel.style.maxHeight = (panel.scrollHeight) + "px";
}
}
for (i = 0; i < buttonListLB.length; i++) {
for (j = 0; j < buttonListB.length; j++) {
for (k = 0; k < buttonListDB.length; k++) {
buttonListDB[k].addEventListener("click", openDropbox);
}
buttonListB[j].addEventListener("click", openDropbox);
}
buttonListLB[i].addEventListener("click", openDropbox);
}
.column {
float: left;
width: 48%;
padding: 2px;
height: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
.button-lightblue {
background-color: #0287c5;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: 1px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-lightblue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-lightblue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-blue {
background-color: #005aab;
color: white;
cursor: pointer;
padding: 16px;
width: 100%;
border: 2px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-blue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-blue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-darkblue {
background-color: #003c71;
color: white;
cursor: pointer;
padding: 14px;
width: 100%;
border: 2px solid white;
border-radius: 6px;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
font-weight: bold;
}
.button-darkblue:after {
content: '⏵';
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: white;
float: right;
margin-left: 2px;
}
.active,
.button-darkblue:hover {
background-color: #0085d8;
}
.active:after {
content: "⏷";
}
.button-link {
padding: 14px;
background-color: #f1f1f1;
height: 0;
color: black;
cursor: pointer;
text-align: left;
font-size: 12px;
font-family: Arial;
}
.accordion-content {
padding: 0 2px;
background-color: white;
max-height: 0;
font-family: Arial;
display: none;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.dropbox-content {
position: fixed;
padding: 0 2px;
background-color: #f1f1f1;
max-height: 0;
display: none;
width: 35%;
z-index: 1;
transition: max-height 0.2s ease-out;
}
.dropbox-content a {
color: #0085d8;
font-family: Arial;
transition: max-height 0.4s ease-out;
}
.dropbox-content font {
color: #0085d8;
font-family: Arial;
transition: max-height 0.4s ease-out;
}
.additional-content {
padding: 5px 5px;
display: block;
background-color: #003c71;
font-family: Arial;
color: white;
overflow: visible;
}
<div class="row">
<div class="column">
<button class="button-lightblue"> Top Button 1</button>
<div class="accordion-content">
<button class="button-blue"> Middle Button 1</button>
<div class="accordion-content">
<button class="button-darkblue"> Bottom Button 1</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
<button class="button-darkblue"> Bottom Button 2</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
</div>
<button class="button-blue"> Middle Button 2</button>
<div class="accordion-content">
<button class="button-darkblue"> Bottom Button 3</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
<button class="button-darkblue"> Bottom Button 4</button>
<div class="accordion-content">
<font face="Arial">
Dead Link
</font>
</div>
</div>
</div>
</div>
</div>
Running the above snippet should make the problem very clear. I'm open to any suggestions, thank you in advance.
EDIT: I removed an erroneous function I left in the script by mistake.
I can't get the following code to work properly.
I have a simple menu.
One of the items contains a submenu.
I'd like it to collapse and uncollapse upon clicking the item.
For some reason it only uncollapses the first sub-item and not the rest.
I could not find a similar thread, thats why I am positing my question here.
All help is welcome
function toggleSubmenu(e) {
e.classList.toggle("active");
var panel = e.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
.c-menu {
position: absolute;
width: 200px;
margin: 0px;
padding: 0;
background-color: #fff;
border-left: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.c-menu ul {
list-style-type: none;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 5px;
width: 100%;
height: 35px;
border: none;
border-bottom: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.c-menu ul.active,
.c-menu ul:hover {
background-color: #EAEAEA;
}
.c-submenu {
list-style: none;
margin: 0;
padding: 0;
}
.c-submenu li {
border-bottom: 1px solid #CBCBCB;
height: 35px;
font-size: 14px;
padding: 10px 0 0 39px;
cursor: pointer;
}
.c-submenu li:hover {
background-color: #EAEAEA;
}
.c-panel {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='c-menu'>
<ul>A</ul>
<ul>B</ul>
<ul>C</ul>
<ul onclick='toggleSubmenu(this)'>OPEN</ul>
<ul class="c-submenu c-panel">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</div>
You need to toggle your panel.style.overflow property.
function toggleSubmenu(e) {
e.classList.toggle("active");
var panel = e.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
panel.style.overflow = "hidden";
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.overflow = "visible";
}
}
.c-menu {
position: absolute;
width: 200px;
margin: 0px;
padding: 0;
background-color: #fff;
border-left: 1px solid #CBCBCB;
border-right: 1px solid #CBCBCB;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.c-menu ul {
list-style-type: none;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 5px;
width: 100%;
height: 35px;
border: none;
border-bottom: 1px solid #CBCBCB;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.c-menu ul.active,
.c-menu ul:hover {
background-color: #EAEAEA;
}
.c-submenu {
list-style: none;
margin: 0;
padding: 0;
}
.c-submenu li {
border-bottom: 1px solid #CBCBCB;
height: 35px;
font-size: 14px;
padding: 10px 0 0 39px;
cursor: pointer;
background-color: white;
}
.c-submenu li:hover {
background-color: #EAEAEA;
}
.c-panel {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='c-menu'>
<ul>A</ul>
<ul>B</ul>
<ul>C</ul>
<ul onclick='toggleSubmenu(this)'>OPEN</ul>
<ul class="c-submenu c-panel">
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</div>
hi on scroll active class is not add to the li on click on a that works fine please look at it once.
<script>
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 150;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('.wpb_wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();
</script>
.cs-hd {
font-weight: bold;
font-size: 24px;
}
.cs-para {
font-size: 19px;
}
/*first section */
.cs-secondpara {
padding-top: 15px;
}
.cs-lf {
background: #eaeaea;
padding: 30px;
border-radius: 15px;
}
.cs-lf p {
font-size: 15px;
font-weight: bold;
line-height: 30px;
}
.cs-pa {
border-bottom: 1px solid #a2a2a2;
padding-bottom: 30px;
}
.cs-ul {
line-height: 30px;
font-size: 15px;
padding-top: 30px;
}
.cs-bhd {
color: #29aae2;
font-weight: bold;
font-size: 21px;
}
/*second-section*/
.cs-im-bl {
display: inline-block;
border-right: 1px solid #9c9191;
padding-right: 20px;
width: 20%;
vertical-align: top;
}
.cs-bul {
display: inline-block;
font-size: 17px;
line-height: 27px;
width: 78%;
}
.cs-main {
background: white;
padding: 30px;
border-radius: 15px;
}
.cs-main p {
line-height:27px;
}
.p-four {
padding-top: 10px;
}
.cs-blu-hd {
color: #29aae2;
font-size: 22px;
}
/*third section*/
.cs-im {
display: inline-block;
vertical-align: top;
padding-right: 15px;
padding-top: 55px;
}
.cs-bul-third ul {
border-left: 1px solid #9c9191;
}
.cs-bul-third {
display: inline-block;
font-size: 17px;
line-height: 27px;
width: 67%;
}
/*tab section fourth */
.vc_tta-title-text {
font-size: 17px;
color: #231f20;
font-weight: bold;
}
.vc_tta-tab {
margin: 1px 0 0 0px !Important;
border: 1px solid #908789;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a .vc_tta-title-text {
color: white;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab.vc_active>a {
background-color: #29aae2 !Important;
}
.vc_tta.vc_general .vc_tta-tab>a
{
padding: 14px 44px !important;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:focus, .vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a:hover {
background-color: transparent;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-tab>a {
background: transparent !Important;
}
.cs-list
{
font-size:17px;
line-height:30px;
}
.cs-border
{ border: 1px solid #c7c7c7;
border-radius: 15px;
}
.cs-border p
{
line-height: 27px;
}
.line-banner-section p a {
padding: 5px 5px 5px 5px !important;
width: 200px !important;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
color: #41ABE1 !important;
background: #ffffff;
}
.line-banner-section p a:hover {
width: 200px !important;
background: rgba(255, 255, 255, 0);
color: #ffffff !important;
}
.cs-txt-blk {
margin-bottom: 0px;
}
/*nav bar*/
.menu {
width: 160px;
height: auto;
background-color: #eaeaea;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
}
#menu-center ul {
margin: 0 !IMPORTANT;
padding: 10px 10px 10px 24px;
}
#menu-center ul li {
list-style: none;
margin: 0px 0px 20px 0;
width: 98px;
}
#menu-center .active {
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 16px;
font-weight: bold;
}
#menu-center a {
color: black;
text-decoration: none;
line-height: 16px;
font-size: 14px;
font-weight: bold;
}
#cs-index {
z-index: 1;
position: fixed;
left: -14px;
top: 130px;
width: 180px;
}
/*navigation bar links*/<body>
<div class="m1 menu">
<div id="menu-center">
<nav>
<ul>
<li>Innovating in<br>Entrepreneurship<br>services
</li>
<li>Training Future<br>and Present<br>Entrepreneurs
</li>
<li>Mentoring<br>and<br>Accelerating
</li>
<li> Working<br>Internationally
</li>
<li>Innovation and<br>Intrapreneurship<br>in Corporates
</li>
<li>Impact Real<br>Scale-ups
</li>
</ul>
</nav>
</div>
</div>
/*one section where scrolling comes its a wordpress site*/
<div class="wpb_wrapper"><div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<section id="bottom" data-anchor="bottom">
<h4 class="cs-hd" style="text-align: center;">Innovation and Intrapreneurship in Corporates</h4>
</section></div>
</div>
<div class="wpb_single_image wpb_content_element vc_align_center">
<figure class="wpb_wrapper vc_figure">
<div class="vc_single_image-wrapper vc_box_border_grey"><img width="1035" height="490" src="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png" class="vc_single_image-img attachment-full" alt="corporate-infographic" srcset="http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic.png 1035w, http://changeschool.org/wp-content/uploads/2016/08/corporate-infographic-768x363.png 768w" sizes="(max-width: 1035px) 100vw, 1035px"></div>
</figure>
</div>
<div class="vc_empty_space" style="height: 70px"><span class="vc_empty_space_inner"></span></div>
</div>
</body>
hi on scroll active class is not add to the li on click on a that works fine please look at it once.
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('nav a').removeClass('active');
if (windscroll >= 100) {
$('.wpb_wrapper section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
var sectionName = $(this).data('anchor');
$('nav a[data-scroll=' + sectionName + ']').addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a:first').addClass('active');
}
});
Action to remove class active firing allays so I moved it to top.
To select link use his data attribute.