title: Hide grid items with JavaScript
body: <p>I have a 2 x 2 CSS grid. Each grid item briefly describes a service (small business website) and each grid item has a button to learn more about said service. When a user clicks one of the four buttons to learn more, I would like that grid item to expand to take up the entire 2x2 grid (this I have working) and for the other 3 grid items to disappear (this I am having trouble with). Here is an example: <a href="https://jsfiddle.net/L7fatdmh/" rel="nofollow noreferrer">https://jsfiddle.net/L7fatdmh/</a> , note that only the first grid item has JS applied to it at the moment. </p>
  
  <p>html:</p>
  
  <pre><code> &lt;div class="grid-squares"&gt;
              &lt;div class="grid_item" id="g1"&gt;
                &lt;h2&gt;Service One&lt;/h2&gt;
                &lt;p&gt;
                  lorem impsum
                &lt;/p&gt;
                &lt;button id="firstButton"&gt;Learn More&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="grid_item"&gt;
                &lt;h2&gt;Service Two&lt;/h2&gt;
                 &lt;p&gt;
                  lorem impsum
                &lt;/p&gt;
                &lt;button&gt;Learn More&lt;/button&gt;              
              &lt;/div&gt;
              &lt;div class="grid_item"&gt;
                &lt;h2&gt;Service Three&lt;/h2&gt;
                &lt;p&gt;
                  lorem impsum
                &lt;/p&gt; 
                &lt;button&gt;Learn More&lt;/button&gt;             
              &lt;/div&gt;
              &lt;div class="grid_item"&gt;
                &lt;h2&gt;Service Four&lt;/h2&gt;
                 &lt;p&gt;
                  lorem impsum
                &lt;/p&gt; 
                 &lt;button&gt;Learn More&lt;/button&gt;         
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>.grid-squares{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: 300px;
  }
  </code></pre>
  
  <p>js: </p>
  
  <pre><code>firstButton = document.getElementById("firstButton");
  firstButton.onclick = function(){
    squaresGrid = document.getElementsByClassName("grid-squares");
    g1 = document.getElementById("g1");
    console.log(g1)
    g1.style.gridColumn = "1/3";
    g1.style.gridRow = "1/3";
  }
  </code></pre>
  
  <p>As you can see in the jsFiddle example, the grid item does expand to fill the proper space, but all of the other grid items are still visible underneath. How can I hide these? Is initially hiding all <code>grid-item</code>s and then displaying a specific item based on it's <code>id</code> (i.e <code>g1</code> in the first grid item) the best option? </p>