'How can I keep flex columns from expanding when hidden section opened?

What I'm trying to accomplish is having a hidden section opened by a button (the "Disclosure" button) but when that section expands I don't want the column next to it to expand as well because there's no need for it to do so. I feel like it has to be something in the Flex settings but I can't seem to figure out where I would declare it in such a way that only the one column will expand and ideally push the one below it down without expanding the column to the right of it.

I'm also trying to get the font awesome chevron icon to rotate upon the disclosure content-box having expanded (active state?) but I can't seem to figure that out either.

Here's the css, html, and javascript that I'm working with:

var acc = document.getElementsByClassName("disclosureBtn");
var i;

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

    /* Toggle between hiding and showing the active panel */
    var disclosureContent = this.nextElementSibling;
    if (disclosureContent.style.display === "block") {
      disclosureContent.style.display = "none";
    } else {
      disclosureContent.style.display = "block";
    }
  });
}

.specialContainer {
  display: flex;
  flex-direction: row;
  gap: 0.35em 0.35em;
  max-width: 1345px;
  flex-wrap: wrap;
  background-color: transparent;
  margin: 0.35em auto 0em auto;
  padding: 0rem 0rem 0rem 0rem;
}

.specialContainer>div {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  float: left;
  width: calc(50% - 0.25em);
  height: auto;
  margin: 0em auto 0em auto;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}

.disclosureContainer {
  display: block;
  width: 100%;
  height: auto;
  background-color: #E7E6E6;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

.disclosureContent {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  color: #646464;
  background: #E7E6E6;
  display: none;
  font-size: 0.6rem;
  line-height: 0.8rem;
  text-align: justify;
  font-weight: 400;
  text-justify: inter-word;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0em 0.55em 0.1em 0.55em;
}

.disclosureBtn {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  width: 100%;
  height: 18px;
  display: block;
  margin: 0em auto 0em auto;
  padding: 0em 0em 0em 0em;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-5px);
}

.disclosureBtnTxt {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 400;
  display: inline-block;
  color: #646464;
  padding: 0em 0em 0em 0em;
  margin: 0em auto 0em auto;
  text-align: center;
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 0.8rem;
  letter-spacing: 0.01rem;
  cursor: pointer;
}

.fa-chevron-right {
  color: #646464;
  display: inline-block;
  font-size: 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  transition: 0.2s all;
}

.disclosureContent:active .fa-chevron-right {
  transform: rotate(90deg);
  transition: 0.2s all;
}

<div class="specialContainer">
  <div class="row">
    Offer Container 1
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 2
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 3
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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>
    </section>
  </div>
  <div class="row">
    Offer Container 4
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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>
    </section>
  </div>
</div>

Here's a JS fiddle with all of that included:

https://jsfiddle.net/30j5Loky/102/

Solution 1:^[1]

You need to apply position: relative; to the container. Then apply position: absolute tothe content and combine it with top: 100% and a positive z-index to let it expend to the bottom without resizing the element by itself.

PS: I shortend your JS code and removed the if/else statement. I replaced it with a classList.toggle function and apply changes through CSS. Makes the code shorter and removes potencial specificty weight issues. YOu should avoid to use .style function in 2022.

var acc = document.getElementsByClassName("disclosureBtn");
var i;

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

    /* Toggle between hiding and showing the active panel */
    var disclosureContent = this.nextElementSibling;
    disclosureContent.classList.toggle("d-block");
  });
}

.disclosureContainer {
  position: relative;
}

.disclosureContent {
  position: absolute;
  top: 100%;
  z-index: 1;
}


/* original CSS */
.specialContainer {
  display: flex;
  flex-direction: row;
  gap: 0.35em 0.35em;
  max-width: 1345px;
  flex-wrap: wrap;
  background-color: transparent;
  margin: 0.35em auto 0em auto;
  padding: 0rem 0rem 0rem 0rem;
}

.specialContainer>div {
  background-color: #E7E6E6;
  position: relative;
  max-width: 1345px;
  text-align: center;
  outline: 1px solid black;
  float: left;
  width: calc(50% - 0.25em);
  height: auto;
  margin: 0em auto 0em auto;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.6);
}

.disclosureContainer {
  display: block;
  width: 100%;
  height: auto;
  background-color: #E7E6E6;
  text-align: center;
  padding: 0em 0em 0em 0em;
  margin: 0em 0em 0em 0em;
}

.disclosureContent {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  color: #646464;
  background: #E7E6E6;
  display: none;
  font-size: 0.6rem;
  line-height: 0.8rem;
  text-align: justify;
  font-weight: 400;
  text-justify: inter-word;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0em 0.55em 0.1em 0.55em;
}

.disclosureBtn {
  background-color: transparent;
  border: none;
  border-collapse: collapse;
  width: 100%;
  height: 18px;
  display: block;
  margin: 0em auto 0em auto;
  padding: 0em 0em 0em 0em;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-5px);
}

.disclosureBtnTxt {
  font-family: Oswald Regular, Univers, Helvetica Neue, Helvetica, Arial;
  font-weight: 400;
  display: inline-block;
  color: #646464;
  padding: 0em 0em 0em 0em;
  margin: 0em auto 0em auto;
  text-align: center;
  text-decoration: none;
  font-size: 0.5rem;
  line-height: 0.8rem;
  letter-spacing: 0.01rem;
  cursor: pointer;
}

.fa-chevron-right {
  color: #646464;
  display: inline-block;
  font-size: 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  transition: 0.2s all;
}

.disclosureContent:active .fa-chevron-right {
  transform: rotate(90deg);
  transition: 0.2s all;
}


/* improvement for JS */
.d-block {
  display: block;
}

<div class="specialContainer">
  <div class="row">
    Offer Container 1
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 2
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m`agna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </section>
  </div>
  <div class="row">
    Offer Container 3
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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>
    </section>
  </div>
  <div class="row">
    Offer Container 4
    <section class="disclosureContainer">
      <a class="disclosureBtn">
        <p class="disclosureBtnTxt"><i class="fa fa-chevron-right"></i>&nbsp;Disclosure</p>
      </a>
      <p class="disclosureContent">
        Lorem ipsum dolor sit amet, consectetur adipiscing 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>
    </section>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How can I keep flex columns from expanding when hidden section opened?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]