Отрегулируйте радиус границы на кнопке, когда div свернут / скрыт / не активен

Question

Я использую здесь код разборного элемента divs: https://www.w3schools.com/howto/howto_js_collapsible.asp

И я спросил здесь, как сделать элементы div видимыми по умолчанию, и на них был дан ответ: Сделайте «Разборные деления» НЕ скрытыми по умолчанию

Но теперь у меня есть проблема с моим CSS, потому что я добавил в мой радиус границы. Поэтому, когда он открыт, он работает нормально - он имеет закругленную границу вокруг всей пары .collapsible / .inside, но когда он закрыт, я не знаю, как сделать закругленную границу на кнопке .container (потому что, как у меня есть код делает дно складного не округленным) - как мне дать "неактивный" CSS код, наверное?

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 || content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {
  background-color: #007784;
  color: white;
  cursor: pointer;
  width: 97%;
  border:2px solid #000000;
  border-bottom:0px;
  border-radius:15px 15px 0px 0px;
  text-align: center;
  outline: none;
  font-size: 16px;
  font-weight:bold;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  margin-top:3px;
  padding:2px;
}

.collapsible:hover {
  background-color: #0066FF;
  border-bottom:0px;
  border-radius:15px 15px 0px 0px;
  margin-top:3px;
}

.active {
  background-color: #007784;
  border-bottom:0px;
  border-radius:15px 15px 0px 0px;
  margin-top:3px;
}

.inside {
  padding: 0;
  width: 97%;
  display: block;
  overflow: hidden;
  border-top:0px;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  background-color: #FFFFFF;
  border-radius:0px 0px 15px 15px;
}



/*unrelated coding*/
table.trials {border:0; border-collapse:collapse; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center; background-color:#000000; border-radius:15px; }
table.trials tr td {border: 1px solid #000000;}
table.trials tr td:first-child {border-left:0;}
table.trials tr td:last-child {border-right:0;}
table.trials tr:last-child td {border-bottom:0;}
.trials tr:last-child td:first-child {border-radius:0px 0px 0px 13px;}
.trials tr:last-child td:last-child {border-radius:0px 0px 13px 0px;}
td {background-color:#FFFFFF;}
td.NA {background-color:#CCCCCC;}
.divider td {height:3px; padding:0px; background-color:#000000;}

<button type="button" class="collapsible">CH &mdash; Conformation Champion &nbsp; <span style="font-size:14px; font-weight:normal; font-style:italic;">total: 15 pts / 3 Majors</span></button>
<div class="inside" style="padding:0;"><!------------CH - Conformation Champion------------------------------------------------------>
<table class="trials" cellspacing="0" cellpadding="2px" style="width:100%; margin:0; border-radius:0;">
  <tr><!------DATE: Weekday &mdash; Month ##, YYYY------->
    <td width="25%">Saturday &ndash; August 20, 2016</td>
    <td width="25%">Sunday &ndash; September 11, 2016</td>
    <td width="25%">Sunday &ndash; January 22, 2017</td>
	<td width="25%">Sunday &ndash; May 7, 2017</td>
  </tr>
  <tr><!------HOST CLUB---------------------------------->
    <td width="25%">Olympic Kennel Club</td>
    <td width="25%">Eugene Kennel Club</td>
    <td width="25%">Tualatin Kennel Club</td>
	<td width="25%">Olympia Dog Fanciers Association</td>
  </tr>
  <tr><!------LOCATION: Venue &mdash; City, State-------->
    <td width="25%">Enumclaw, WA</td>
    <td width="25%">Brownsville, OR</td>
    <td width="25%">Portland, OR</td>
	<td width="25%">Elma, WA</td>
  </tr>
  <tr><!------JUDGE-------------------------------------->
    <td width="25%">Judge: Adrian Woodfork</td>
    <td width="25%">Judge: Nancy Simmons</td>
    <td width="25%">Judge: John Ronald</td>
	<td width="25%">Judge: Roger Pritchard</td>
  </tr>
  <tr class="award"><!------SCORE/PLACE/POINT------------>
    <td width="25%"><i class="W">WB</i> &mdash; 1 pt</td>
    <td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> &mdash; 2 pts</td>
    <td width="25%"><i class="W">WB</i> &mdash; 1 pt</td>
	<td width="25%"><i class="W">WB</i> &mdash; 3 pt Major</td>
  </tr>
  <tr class="divider"><td colspan="4"></td></tr><!--------------------------------DIVIDER-------------------------------->
  <tr><!------DATE: Weekday &mdash; Month ##, YYYY------->
    <td width="25%">Monday &ndash; May 29, 2017</td>
    <td width="25%">Sunday &ndash; June 25, 2017</td>
    <td width="25%">Monday &ndash; July 10, 2017</td>
	<td width="25%" class="NA">&nbsp;</td>
  </tr>
  <tr><!------HOST CLUB---------------------------------->
    <td width="25%">Kennel Club of the California Sierra</td>
    <td width="25%">Clackamas Kennel Club</td>
    <td width="25%">Puyallyp Valley Dog Fanciers</td>
	<td width="25%" class="NA">&nbsp;</td>
  </tr>
  <tr><!------LOCATION: Venue &mdash; City, State-------->
    <td width="25%">Placerville, CA</td>
    <td width="25%">Canby, OR</td>
    <td width="25%">Puyallup, WA</td>
	<td width="25%" class="NA">&nbsp;</td>
  </tr>
  <tr><!------JUDGE-------------------------------------->
    <td width="25%">Judge: Pat Hastings</td>
    <td width="25%">Judge: Minna-Liisa Koltes</td>
    <td width="25%">Judge: Sheila DiNardo</td>
	<td width="25%" class="NA">&nbsp;</td>
  </tr>
  <tr class="award"><!------SCORE/PLACE/POINT------------>
    <td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> / <i class="BOS">BOS</i> &mdash; 3 pt Major</td>
    <td width="25%"><i class="W">WB</i> / <i class="BOW">BOW</i> &mdash; 1 pt</td>
    <td width="25%"><i class="BOB">BOB</i> &mdash; 4 pt Major</td>
	<td width="25%" class="NA">&nbsp;</td>
  </tr>
</table>
</div>

Answer 1

Вы можете добавить CSS правило

button.collapsible.active {
    border-radius: 15px;
}

Это говорит, что когда у кнопки есть оба collapsible и active классы, радиус границы должен быть 15px для всех около.

Кроме того, я бы избегал прямого манипулирования content.style.display и делал бы блок отображения или вообще не основанный на классах.