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> 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> 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> 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> 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/
Advertisement
Answer
I figured it out. I just needed to add align-items: flex-start; to the parent container and that caused the desired effect: jsfiddle.net/9eg4rkoz
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("disclosureBlock");
});
}.specialContainer {
display: flex;
flex-direction: row;
gap: 0.35em 0.35em;
max-width: 1345px;
flex-wrap: wrap;
align-items: flex-start;
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;
}
.disclosureBlock {
display: block;
} <meta name="viewport" content="width=device-width" initial-scale="1">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<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> 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> 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> 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> 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>