1

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.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      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;
    }
  </style>
</head>

<body>

  <div style="text-align:center">
    <h2>Expanding Grid</h2>
    <p>Click on the boxes below:</p>
  </div>

  <!-- Three columns -->
  <div class="row">
    <div class="column" onclick="openTab('b1');" style="background:green;">
      Box 1
    </div>
    <div id="b1" class="containerTab" style="display:none;background:green">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 1</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b2');" style="background:blue;">
      Box 2
    </div>
    <div id="b2" class="containerTab" style="display:none;background:blue">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 2</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:red;">
      Box 3
    </div>
    <div id="b3" class="containerTab" style="display:none;background:red">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 3</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:yellow;">
      Box 4
    </div>
    <div class="column" onclick="openTab('b3');" style="background:gray;">
      Box 5
    </div>
    <div class="column" onclick="openTab('b3');" style="background:purple;">
      Box 6
    </div>
  </div>

  <!-- Full-width columns: (hidden by default) -->


  <script>
    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName("containerTab");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      document.getElementById(tabName).style.display = "block";
    }
  </script>

</body>

</html>
Kalle Richter
  • 8,008
  • 26
  • 77
  • 177
Joe
  • 9
  • 1
  • 5
  • Not sure if I understand correctly, but I would use bootstrap collapse and your box as the trigger. If you position it absolute, none of the other elements would move. Can check it out here: https://getbootstrap.com/docs/4.0/components/collapse/ – Rob Jun 05 '18 at 19:54

2 Answers2

1

I answered a similar questions here: ExpressionEngine channel entries loop to create accordion grid with Bootstrap and Bootstrap grid with collapsed container in between

They can be adapted to your scenario, but make sure you use the appropriate grid classes (ie:col-4).

3 columns: https://www.codeply.com/go/6Yt0xSZdgu
4 columns: https://www.codeply.com/go/TLJi5MxQ1E

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • This Is exactly what I'm looking for! Thanks! – Joe Jun 05 '18 at 20:56
  • I have related question here https://stackoverflow.com/questions/55007478/expand-column-inside-bootstrap-css-grid-shifts-other-columns – infodev Mar 05 '19 at 23:38
0

You could place the element, which contains more information, inside the column and the position it absolute. So all other columns will remain where they are.

I modified your code a bit, click the first box to see information expanding without moving all other columns:

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 50px;
      text-align: center;
      font-size: 25px;
      cursor: pointer;
      color: white;

      position: relative;
    }

    .containerTab {
      position: absolute;
      width: 100%
      padding: 20px;
      color: white;
      z-index: 10;
      left: 0;
      top: 0;
      right: 0;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .closebtn {
      float: right;
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div style="text-align:center">
    <h2>Expanding Grid</h2>
    <p>Click on the boxes below:</p>
  </div>

  <!-- Three columns -->
  <div class="row">
    <div class="column" onclick="openTab('b1');" style="background:green;">
      Box 1
      <div id="b1" class="containerTab" style="display:none;background:green">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <h2>Box 1</h2>
        <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
      </div>
    </div>
    <div class="column" onclick="openTab('b2');" style="background:blue;">
      Box 2
    </div>
    <div id="b2" class="containerTab" style="display:none;background:blue">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 2</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:red;">
      Box 3
    </div>
    <div id="b3" class="containerTab" style="display:none;background:red">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <h2>Box 3</h2>
      <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
    </div>
    <div class="column" onclick="openTab('b3');" style="background:yellow;">
      Box 4
    </div>
    <div class="column" onclick="openTab('b3');" style="background:gray;">
      Box 5
    </div>
    <div class="column" onclick="openTab('b3');" style="background:purple;">
      Box 6
    </div>
  </div>

  <!-- Full-width columns: (hidden by default) -->


  <script>
    function openTab(tabName) {
      var i, x;
      x = document.getElementsByClassName("containerTab");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      document.getElementById(tabName).style.display = "block";
    }
  </script>

</body>

</html>
MarvHock
  • 793
  • 7
  • 16