title: Filter By Image Don't want show all image
body: <p>I am creating Filter Image Gallery .by Default when the page is loading showing all images. I have two four different tabs </p>
  
  <p><strong>1. Show all  2.Nature 3. Cars 4. People</strong></p>
  
  <p>Now I don't want all image showing. by default, I want to show Nature filter images by default after the page loaded.</p>
  
  <p>please check my Code : <a href="https://codepen.io/Thennarasu41/pen/RLeEzK" rel="nofollow noreferrer">Code is here </a></p>
  
  <p>also, attach my Code  </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-js lang-js prettyprint-override"><code>   filterSelection("all")
      function filterSelection(c) {
        var x, i;
        x = document.getElementsByClassName("column");
        if (c == "all") c = "";
        for (i = 0; i &lt; x.length; i++) {
          w3RemoveClass(x[i], "show");
          if (x[i].className.indexOf(c) &gt; -1) w3AddClass(x[i], "show");
        }
      }
      
      function w3AddClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i &lt; arr2.length; i++) {
          if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
        }
      }
      
      function w3RemoveClass(element, name) {
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        for (i = 0; i &lt; arr2.length; i++) {
          while (arr1.indexOf(arr2[i]) &gt; -1) {
            arr1.splice(arr1.indexOf(arr2[i]), 1);     
          }
        }
        element.className = arr1.join(" ");
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
  }
  
  body {
      background-color: #f1f1f1;
      padding: 20px;
      font-family: Arial;
  }
  
  /* Center website */
  .main {
      max-width: 1000px;
      margin: auto;
  }
  
  h1 {
      font-size: 50px;
      word-break: break-all;
  }
  
  .row {
      margin: 10px -16px;
  }
  
  /* Add padding BETWEEN each column */
  .row,
  .row &gt; .column {
      padding: 8px;
  }
  
  /* Create three equal columns that floats next to each other */
  .column {
      float: left;
      width: 33.33%;
      display: none; /* Hide all elements by default */
  }
  
  /* Clear floats after rows */ 
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
  
  /* Content */
  .content {
      background-color: white;
      padding: 10px;
  }
  
  /* The "show" class is added to the filtered elements */
  .show {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
  
   &lt;h1&gt;MYLOGO.COM&lt;/h1&gt;
   &lt;hr&gt;
  
   &lt;h2&gt;PORTFOLIO&lt;/h2&gt;
   &lt;input type="radio" onclick="filterSelection('all')" name="category" checked&gt; Show all
   &lt;input type="radio" onclick="filterSelection('nature')" name="category"&gt; Nature
   &lt;input type="radio" onclick="filterSelection('cars')" name="category"&gt; Cars
   &lt;input type="radio" onclick="filterSelection('people')" name="category"&gt; People
  
  &lt;div class="main"&gt;
  
  &lt;h1&gt;MYLOGO.COM&lt;/h1&gt;
  &lt;hr&gt;
  
  &lt;h2&gt;PORTFOLIO&lt;/h2&gt;
  &lt;input type="radio" onclick="filterSelection('all')" name="category" checked&gt; Show all
  &lt;input type="radio" onclick="filterSelection('nature')" name="category"&gt; Nature
  &lt;input type="radio" onclick="filterSelection('cars')" name="category"&gt; Cars
  &lt;input type="radio" onclick="filterSelection('people')" name="category"&gt; People
  
  &lt;!-- Portfolio Gallery Grid --&gt;
  &lt;div class="row"&gt;
   &lt;div class="column nature"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%"&gt;
     &lt;h4&gt;Mountains&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="column nature"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/lights.jpg" alt="Lights" style="width:100%"&gt;
     &lt;h4&gt;Lights&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="column nature"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/nature.jpg" alt="Nature" style="width:100%"&gt;
     &lt;h4&gt;Forest&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="column cars"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/cars1.jpg" alt="Car" style="width:100%"&gt;
     &lt;h4&gt;Retro&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="column cars"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/cars2.jpg" alt="Car" style="width:100%"&gt;
     &lt;h4&gt;Fast&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="column cars"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/cars3.jpg" alt="Car" style="width:100%"&gt;
     &lt;h4&gt;Classic&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="column people"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/people1.jpg" alt="Car" style="width:100%"&gt;
     &lt;h4&gt;Girl&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="column people"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/people2.jpg" alt="Car" style="width:100%"&gt;
     &lt;h4&gt;Man&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="column people"&gt;
    &lt;div class="content"&gt;
     &lt;img src="/w3images/people3.jpg" alt="Car" style="width:100%"&gt;
     &lt;h4&gt;Woman&lt;/h4&gt;
     &lt;p&gt;Lorem ipsum dolor..&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;!-- END GRID --&gt;
  &lt;/div&gt;
  
  &lt;!-- END MAIN --&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>how  to change nature by default i  don't want showing all images . i  tired but still showing all images. thank you advance </p>