CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sofia Lazrak
Sofia Lazrak

Reputation: 304

Bootstrap expand one column adds height to all adjacent columns

I have a 4 column layout in bootstrap. Every column has text and a "Show more" button that expands and show more content when clicked.

The problem I am facing is that when the "Show more" link is clicked, not only does the content of that column expands, but it also expands the height, not the content of all other columns too. The extra content of the other columns is not expanded.

I know the problem comes from the bootstrap col-4 class. But I need that class to keep a responsive design. I only want the column which I clicked on the "Show more" to expand. Any ideas on how to prevent the other column from expanding in height?

My code:

<script>
$(document).ready(function () {
    $('#collapseExample1').on('click', function () {
        var text=$('#collapseExample1').text();
        if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample2').on('click', function () {
         var text=$('#collapseExample2').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample3').on('click', function () {
         var text=$('#collapseExample3').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample4').on('click', function () {
         var text=$('#collapseExample4').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
});
</script>

<style>
    .card {
        width: 273px;
        min-height: 503px;
        border-radius: 7px;
        box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        margin: 0 10px;
        position: relative;
        overflow: hidden;
}
</style>

<div class="d-flex justify-content-center">
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show more</a>
        </div>
    </div>
</div>

Upvotes: 2

Views: 206

Answers (2)

Samuel Silas
Samuel Silas

Reputation: 319

Remove the double classes col-4 and card and instead nest them by puting each class on its own separate div as follows

<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            
        </div>
    </div>
</div>

.

<div class="d-flex justify-content-center">
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>

Upvotes: 0

Vladislav Akhmetvaliyev
Vladislav Akhmetvaliyev

Reputation: 755

Just add wrapper with col-4 like this

<div class="col-4">
    <div class="card">


.card {
        width: 273px;
        min-height: 50px;
        border-radius: 7px;
        box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        margin: 0 10px;
        position: relative;
        overflow: hidden;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions