Open new div below bootstrap col

Question

Let's suppose I have the following table in bootstrap:

And I want to open a div with more information below the col when I click it:

Is this possible to do with css/javascript? I have tried the Metro Dropdown but the opened div is being constrained by the col-3 width. I have also tried to set the width for this div in css, but I can't seem to reach a result similar to the image attached.

What is the name of a behaviour like this? It seems like a "Dropdown" that push the bellow components a bit down. How do I do something like this?

Answer 1

As I mentioned above, there are some missing specifications in your question. Here's a stab at it. If it's off the mark, update your question with more detail and leave a comment.

 $(document).ready(function() { let counter = 1; $('.container-fluid').fadeIn(); $('.col-12').click(function() { // slide up existing detail row with animation, then remove it $(this).closest('.row').find('.detail').slideUp(400, function() { $(this).remove(); }); // create and append a new row with animation let detailEl = $('<div class="col-12 detail hidden">' + counter + '</div>'); $(this).closest('.row').append(detailEl) detailEl.slideDown(); counter++; }); });

 .row { border-bottom: 2px solid #ddd; } .col-12, .detail { height: 30px; background: pink; } .detail { background: lightgreen; transition: background 1s; } .detail+.detail { background: darkgreen; } .hidden { display: none; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid hidden"> <div class="row"> <div class="col-12"></div> </div> <div class="row"> <div class="col-12"></div> </div> </div>

Fiddle demo