Question 246221 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to expand and collapse divs individually, from the same row?

First of all, sorry about my English! I’m trying to make a landing page with boostrap. My services section has four divs that inside each they have a collapsible button each, but when I hit one of
those, all of the divs expand to the same height. I want only the selected div to expand.
Can you help me?

enter image description here

<section id="services" class="services section-bg">
     <div class="container" data-aos="fade-up">
     <div class="row">
        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0 ejemplo1" data-aos="zoom-in" data-aos-delay="100">
          <div class="icon-box">
            <div class="icon"><i class="bx bxl-dribbble"></i></div>
            <h4>Lorem Ipsum</h4>
            <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
            </p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1"
                aria-expanded="false" aria-controls="collapseExample1">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample1">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>
        

        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-md-0 ejemplo2" data-aos="zoom-in" data-aos-delay="200">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-file"></i></div>
            <h4><a href="">Sed ut perspici</a></h4>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
                aria-expanded="false" aria-controls="collapseExample2">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample2">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0 ejemplo3" data-aos="zoom-in" data-aos-delay="300">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-tachometer"></i></div>
            <h4><a href="">Magni Dolores</a></h4>
            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample3"
                aria-expanded="false" aria-controls="collapseExample3">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample3">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0 ejemplo4" data-aos="zoom-in" data-aos-delay="400">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-layer"></i></div>
            <h4><a href="">Nemo Enim</a></h4>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample4"
                aria-expanded="false" aria-controls="collapseExample4">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample4">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
Tags:

2

Answers


  1. 0

    Its happening because the expansion of the div is making the parent div <div class="row"></div> to expand as-well, one way to fix it is to give height property to the
    <div class="icon-box"></div> or its parent element as height:fit-content

    Login or Signup to reply.
  2. 0

    You can try using height:fit-content as Ayush Patel said. Besides, if you want all divs have the same height, you can add an min-height, and the value must be larger than the largest height.

    The example code:

    .d-flex {
  height: fit-content;
  min-height: 400px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search