javascript html css accordion sticky-footer

Footer is sticky, until I expand my accordion (html, css, vanilla js)

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" class="collapsible">Front End</button>
        
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        </div>
        </div>
      
        <button type="button" class="collapsible">Back End</button>
      
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
         <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
        </div>
        </div>
        
                <button type="button" class="collapsible">Full Stack</button>
      
        <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">Project</h1>
        </div>
         <div class="content">
          <div class = "Project">
          <h1 class="projectsTitle">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>

Solution

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 class="projectsContainer" id="projectsContainer">

  <button type="button" class="collapsible">Front End</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>

      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>

  <button type="button" class="collapsible">Back End</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>
      <div class="Project">
        <h1 class="projectsTitle">Project</h1>
      </div>
    </div>

  <button type="button" class="collapsible">Full Stack</button>

  <div class="content">
    <div class="Project">
      <h1 class="projectsTitle">Project</h1>
    </div>
      <div class="Project">
        <h1 class="projectsTitle">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>