title: Bootstrap Expanding Grid
body: <p>I'm working with bootstrap grids currently creating columns of width 4 (so there are 3 columns across) and populated with information on a SQL database. However, when I click on a specific item in the grid, I'd like a new div (or something else) to expand down and show even more detail on that subject. I'm looking for something like in the demo below however I'd like all the elements in the grid to remain where they are.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;style&gt;
      * {
        box-sizing: border-box;
      }
      
      body {
        margin: 0;
        font-family: Arial;
      }
      /* The grid: Three equal columns that floats next to each other */
      
      .column {
        float: left;
        width: 33.33%;
        padding: 50px;
        text-align: center;
        font-size: 25px;
        cursor: pointer;
        color: white;
      }
      
      .containerTab {
        padding: 20px;
        color: white;
      }
      /* Clear floats after the columns */
      
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      /* Closable button inside the container tab */
      
      .closebtn {
        float: right;
        color: white;
        font-size: 35px;
        cursor: pointer;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div style="text-align:center"&gt;
      &lt;h2&gt;Expanding Grid&lt;/h2&gt;
      &lt;p&gt;Click on the boxes below:&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;!-- Three columns --&gt;
    &lt;div class="row"&gt;
      &lt;div class="column" onclick="openTab('b1');" style="background:green;"&gt;
        Box 1
      &lt;/div&gt;
      &lt;div id="b1" class="containerTab" style="display:none;background:green"&gt;
        &lt;span onclick="this.parentElement.style.display='none'" class="closebtn"&gt;&amp;times;&lt;/span&gt;
        &lt;h2&gt;Box 1&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="column" onclick="openTab('b2');" style="background:blue;"&gt;
        Box 2
      &lt;/div&gt;
      &lt;div id="b2" class="containerTab" style="display:none;background:blue"&gt;
        &lt;span onclick="this.parentElement.style.display='none'" class="closebtn"&gt;&amp;times;&lt;/span&gt;
        &lt;h2&gt;Box 2&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="column" onclick="openTab('b3');" style="background:red;"&gt;
        Box 3
      &lt;/div&gt;
      &lt;div id="b3" class="containerTab" style="display:none;background:red"&gt;
        &lt;span onclick="this.parentElement.style.display='none'" class="closebtn"&gt;&amp;times;&lt;/span&gt;
        &lt;h2&gt;Box 3&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="column" onclick="openTab('b3');" style="background:yellow;"&gt;
        Box 4
      &lt;/div&gt;
      &lt;div class="column" onclick="openTab('b3');" style="background:gray;"&gt;
        Box 5
      &lt;/div&gt;
      &lt;div class="column" onclick="openTab('b3');" style="background:purple;"&gt;
        Box 6
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Full-width columns: (hidden by default) --&gt;
  
  
    &lt;script&gt;
      function openTab(tabName) {
        var i, x;
        x = document.getElementsByClassName("containerTab");
        for (i = 0; i &lt; x.length; i++) {
          x[i].style.display = "none";
        }
        document.getElementById(tabName).style.display = "block";
      }
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>