CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Joe
Joe

Reputation: 9

Bootstrap Expanding Grid

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>

Upvotes: 1

Views: 4026

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362820

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

Upvotes: 1

MarvHock
MarvHock

Reputation: 875

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>

Upvotes: 0

Related Questions