Collapse sections onclick-CodePudding

I have two sections on my page, and I want to collapse/expand them together when the user clicks on any of them. What happens is that each section is collapse/expand alone. How can this be solved?

.collapse-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.collapse-input:checked~p {
  height: auto;
}

.collapse {
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}

.collapse-input {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.collapse-content {
  transition: .2s ease-in;
  width: 100%;
  height: 0px;
}

<div className="collapse-container">
  <section className="collapse">
    <input className="collapse-input" type="checkbox" />
    <p className="collapse-title">First Section</p>
    <p className="collapse-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
  <section className="collapse">
    <input className="collapse-input" type="checkbox" />
    <p className="collapse-title">Second Section</p>
    <p className="collapse-content">
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </section>
</div>

CodePudding user response：

Update

Op needs all <label>s to be able to control all content. See Alternate and Example B.

If you are using invisible checkboxes as switches, then you should add a <label> and associate each one to a checkbox by the for attribute value matching the id attribute of the checkbox (see Figure I). Once an association is established between an <input> and a <label> any click on the <label> automatically confers to it's associated <input>.

The collapsible content must proceed the <input> -- other tags can be between them as long as it is the same for all <input>/<label> pairs. Figure II is the CSS for the content in it's hidden state, if you want the content to be visible initially, then add the checked attribute to the <input>.

Figure I

<input id="chk1" type="checkbox" style="display: none">
<label for="chk1"><!-- [for = "ID of checkbox"] -->
  This is the part of the collapsible that is constantly
  visible and clickable
</label>  
<p>This is the collapsible content</p>

Figure II

p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.65s ease-in-out;
}

Next, you'll need a CSS ruleset involving the <input> being checked and the position of the content relative to the <input>. The CSS pseudo-class :checked indicates that the style will be active only when a checkbox/radio button is checked. The adjacent sibling combinator: indicates the element that is directly following the previous element (see Figure III)

Figure III

input:checked   label   p {
  max-height: 1000px;
}

Example A

.switch {
  display: none;
}

.title {
  display: block;
  cursor: pointer;
}

.title:hover {
  color: red;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

.switch:checked .title .content {
  max-height: 300px;
}

<main>
  <section>
    <input id="col1"  type="checkbox" />
    <label for="col1" >First Section</label>
    <p >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
  <section>
    <input id="col2"  type="checkbox" />
    <label for="col2" >Second Section</label>
    <p >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
</main>

Alternate

Simply remove all but one <input>. Move that single <input> before the first <section>. Next, change the for attribute of each <label> as the id of that single <input>. See Figure IV for CSS. The ~ is a general sibling combinator

Figure IV

/* Change this */
.switch:checked .title .content {
  max-height: 300px;
}
/* to this */
.switch:checked~section .content {
  max-height: 300px;
}

Example B

.switch {
  display: none;
}

.title {
  display: block;
  cursor: pointer;
}

.title:hover {
  color: red;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

.switch:checked~section .content {
  max-height: 300px;
}

<main>
  <input id="col"  type="checkbox" />
  <section>
    <label for="col" >First Section</label>
    <p >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
  <section>
    <label for="col" >Second Section</label>
    <p >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
</main>

CodePudding user response：

Although you've set the height to 0, the text is still being shown because of overflow. So initially, add overflow: hidden to the text to hide it. Then add overflow: auto to the checked text to show it again.

.collapse-container {
    display: grid;
    grid-template-columns: 50% 50%;
}
.collapse {
    position: relative;
    margin: 0 auto;
    cursor: pointer;
}
.collapse-input {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
.collapse-content {
    display: block;
    height: 0;
    overflow: hidden;   /*change here*/
    transition: .2s ease-in;
}
.collapse-input:checked~p{
    height: 20px;       /*use specific height instead of auto for transition*/
    overflow: auto;     /*change here*/
}

<div className="collapse-container">
  <section >
    <input  type="checkbox" />
    <p >First Section</p>
    <p >
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </section>
  <section >
    <input  type="checkbox" />
    <p >Second Section</p>
    <p >
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </section>
</div>