Как убрать границу в месте соприкосновения верхней кнопки и нижней панели, чтобы она выглядела как слитая?

Question

Я делаю кнопку фильтра со скрытой панелью.У меня есть кнопка по умолчанию.При нажатии кнопки панель будет отображаться под кнопкой, но в этом представлении мне нужна отдельная линия границы, которая делает кнопку частью этой рамки, и ни одна из границ, где кнопка касается нижней панели.

var acc = document.getElementsByClassName("accordion");
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 20%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active {
  background-color: white;
  border: 1px solid;
  border-top-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-bottom-color: white;
}

.panel {
  border: 1px solid;
  border-bottom-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-top-color: lightgrey;
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <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>

Answer 1

Есть несколько способов сделать то, что вы просите, но вы можете использовать отрицательное нижнее поле, чтобы опустить кнопку на 1 пиксель так, чтобы ее белая граница перекрывала верхнюю границу на панели:

var acc = document.getElementsByClassName("accordion");
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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 20%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: -1px; /* add this rule */
}

.active {
  background-color: white;
  border: 1px solid;
  border-top-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-bottom-color: white;
}

.panel {
  border: 1px solid;
  border-bottom-color: lightgrey;
  border-left-color: lightgrey;
  border-right-color: lightgrey;
  border-top-color: lightgrey;
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <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>