Basically my sticky footer is at the bottom of the page usually, works completely fine. However on the page with an accordion position:absolute, bottom:0, doesn't seem to be working once the accordion is expanded. Seen similar posts regarding this issue from a few years ago, but no solutions posted. Apologies in advance as I'm a newbie!
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 2%;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
#footerContainer{
position: absolute;
width: 100%;
right: 0;
bottom: 0;
left: 0;
}
<div class= "projectsContainer" id= "projectsContainer">
<button type="button" >Front End</button>
<div >
<div class = "Project">
<h1 >Project</h1>
</div>
<div >
<div class = "Project">
<h1 >Project</h1>
</div>
</div>
</div>
<button type="button" >Back End</button>
<div >
<div class = "Project">
<h1 >Project</h1>
</div>
<div >
<div class = "Project">
<h1 >Project</h1>
</div>
</div>
</div>
<button type="button" >Full Stack</button>
<div >
<div class = "Project">
<h1 >Project</h1>
</div>
<div >
<div class = "Project">
<h1 >Project</h1>
</div>
</div>
</div>
<footer id = "footerContainer">
<button id = "githubBtn"><img class= "socials"</button>
<button id = "linkedinBtn"><img class= "socials"</button>
<button id = "instagramBtn"><img class= "socials"</button>
</footer>
CodePudding user response:
You could nest your footer inside the overall container if you want to keep the flow with the accordions and then use either position: fixed
or position: sticky
depending on your intention. Let me know how this works for you.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 2%;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
display: none;
}
.active,
.collapsible:hover {
background-color: #555;
}
#footerContainer {
position: aboslute;
width: 100%;
right: 0;
bottom: 0;
left: 0;
}
<div id="projectsContainer">
<button type="button" >Front End</button>
<div >
<div >
<h1 >Project</h1>
</div>
<div >
<h1 >Project</h1>
</div>
</div>
<button type="button" >Back End</button>
<div >
<div >
<h1 >Project</h1>
</div>
<div >
<h1 >Project</h1>
</div>
</div>
<button type="button" >Full Stack</button>
<div >
<div >
<h1 >Project</h1>
</div>
<div >
<h1 >Project</h1>
</div>
</div>
<footer id = "footerContainer">
<button id = "githubBtn"><img class= "socials"></button>
<button id = "linkedinBtn"><img class= "socials"></button>
<button id = "instagramBtn"><img class= "socials"></button>
</footer>
</div>