How to expand border bottom on click smoothly

Question

I have a accordion.In hover appear a border bottom with small width.

How to expand this border bottom smoothly on click?

var acc = document.getElementsByClassName("accordion");
var i;
let li = document.getElementsByTagName("li");

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";
    }
  });
}

.accordion {
    font-size: 27px;
    background-color: $default-white;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    transition: 0.4s;
}

.active {
    border-bottom: 1px solid $default-black;
} 
.panel {
    padding: 0 18px; // background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
a {
        text-decoration: none;
        color: $default-black;
        text-align: center;
        font-size: 18px;
        font-family: 'fira_sansregular';
        color: grey;
}
li:hover:before {
          content: "";
          position: absolute;
          left: 40%;
          height: 1px;
          margin-top: 75px;
          text-align: center;
          width: 20%;
          border-bottom: 1px solid #000;
}
ul {
  list-style-type:none;
}

<ul class='nav'>
  <li>
      <button class="accordion">BLA BLAS</button>
      <div class="panel">
          <a href='#'>First bla</a>
          <a href='#'>second bla</a>
          <a href='#'>third bla</a>
          <a href='#'>fourth bla</a>
      </div>
  </li>
  <li>
      <button class="accordion">FILOSOPHY OF BLA</button>
      <div class="panel">
          <a href='#'>Page 2</a>
      </div>
  </li>
  <li>
      <button class="accordion">BLA BLA</button>
      <div class="panel">
          <a href='#'>Page 3</a>
      </div>   
  </li>
  <li>
      <button class="accordion">SOME BLA BLA</button>
      <div class="panel">
          <a href='#'>Page 4</a>
      </div>
  </li>
  <li>
     <button class="accordion">BLA BLA</button>
      <div class="panel">
          <a href='#'>Page 5</a>
      </div> 
  </li>

</ul>

@TakitIsy what here so hard understandable jus expand border width smoothly .Here an example from this question look at this expanding from center border bottom effect https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border/28623513#28623513 — Randall, Jun 04 '18 at 07:27

score 3 · Accepted Answer · answered Jun 04 '18 at 07:31

Is this what you are looking for?

var acc = document.getElementsByClassName("accordion");
var i;
let li = document.getElementsByTagName("li");

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

    this.parentNode.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
  font-size: 27px;
  background-color: $default-white;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  transition: 0.4s;
}

.panel {
  padding: 0 18px; // background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

a {
  text-decoration: none;
  color: $default-black;
  text-align: center;
  font-size: 18px;
  font-family: 'fira_sansregular';
  color: grey;
}

.nav li {
  position: relative;
}

.nav li:hover:before {
  left: 40%;
  width: 20%;
  border-bottom: 1px solid #000;
  transition: all 0.5s;
}

.nav li.active:before,
.nav li:hover:before {
  content: "";
  position: absolute;
  height: 1px;
  bottom: 0;
  border-bottom: 1px solid #000;
}

.nav li.active:before {
  width: 100%;
  left: 0;
}

ul {
  list-style-type: none;
}

<ul class='nav'>
  <li>
    <button class="accordion">BLA BLAS</button>
    <div class="panel">
      <a href='#'>First bla</a>
      <a href='#'>second bla</a>
      <a href='#'>third bla</a>
      <a href='#'>fourth bla</a>
    </div>
  </li>
  <li>
    <button class="accordion">FILOSOPHY OF BLA</button>
    <div class="panel">
      <a href='#'>Page 2</a>
    </div>
  </li>
  <li>
    <button class="accordion">BLA BLA</button>
    <div class="panel">
      <a href='#'>Page 3</a>
    </div>
  </li>
  <li>
    <button class="accordion">SOME BLA BLA</button>
    <div class="panel">
      <a href='#'>Page 4</a>
    </div>
  </li>
  <li>
    <button class="accordion">BLA BLA</button>
    <div class="panel">
      <a href='#'>Page 5</a>
    </div>
  </li>

</ul>

score 1 · Answer 2 · answered Jun 04 '18 at 07:45

in this block code ->

.accordion {
 font-size: 27px;
 background-color: $default-white;
 color: #444;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: center;
 outline: none;
 transition: 0.4s;

}

change two line code ->

border: none;
transition: 0.4s;

to this ->

border-bottom:1px solid #ffffffff;
transition: border 0.4s;

and add code hover; for example:

 .accordion {
    border-bottom: 1px solid black;
 }

i hope help you;

How to expand border bottom on click smoothly

2 Answers2