I am creating Filter Image Gallery .by Default when the page is loading showing all images. I have two four different tabs 

**1. Show all 2.Nature 3. Cars 4. People**

Now I don't want all image showing. by default, I want to show Nature filter images by default after the page loaded.

please check my Code : [Code is here](https://codepen.io/Thennarasu41/pen/RLeEzK) 

also, attach my Code 

```js
   filterSelection("all")
    function filterSelection(c) {
      var x, i;
      x = document.getElementsByClassName("column");
      if (c == "all") c = "";
      for (i = 0; i < x.length; i++) {
        w3RemoveClass(x[i], "show");
        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
      }
    }

    function w3AddClass(element, name) {
      var i, arr1, arr2;
      arr1 = element.className.split(" ");
      arr2 = name.split(" ");
      for (i = 0; i < 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 < arr2.length; i++) {
        while (arr1.indexOf(arr2[i]) > -1) {
          arr1.splice(arr1.indexOf(arr2[i]), 1);     
        }
      }
      element.className = arr1.join(" ");
    }
```

```css
* {
    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 > .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;
}
```

```html
<div class="main">

 <h1>MYLOGO.COM</h1>
 <hr>

 <h2>PORTFOLIO</h2>
 <input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
 <input type="radio" onclick="filterSelection('nature')" name="category"> Nature
 <input type="radio" onclick="filterSelection('cars')" name="category"> Cars
 <input type="radio" onclick="filterSelection('people')" name="category"> People

<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>
<input type="radio" onclick="filterSelection('all')" name="category" checked> Show all
<input type="radio" onclick="filterSelection('nature')" name="category"> Nature
<input type="radio" onclick="filterSelection('cars')" name="category"> Cars
<input type="radio" onclick="filterSelection('people')" name="category"> People

<!-- Portfolio Gallery Grid -->
<div class="row">
 <div class="column nature">
  <div class="content">
   <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
   <h4>Mountains</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <div class="column nature">
  <div class="content">
   <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
   <h4>Lights</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <div class="column nature">
  <div class="content">
   <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
   <h4>Forest</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>

 <div class="column cars">
  <div class="content">
   <img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
   <h4>Retro</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <div class="column cars">
  <div class="content">
   <img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
   <h4>Fast</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <div class="column cars">
  <div class="content">
   <img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
   <h4>Classic</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>

 <div class="column people">
  <div class="content">
   <img src="/w3images/people1.jpg" alt="Car" style="width:100%">
   <h4>Girl</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <div class="column people">
  <div class="content">
   <img src="/w3images/people2.jpg" alt="Car" style="width:100%">
   <h4>Man</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <div class="column people">
  <div class="content">
   <img src="/w3images/people3.jpg" alt="Car" style="width:100%">
   <h4>Woman</h4>
   <p>Lorem ipsum dolor..</p>
  </div>
 </div>
 <!-- END GRID -->
</div>

<!-- END MAIN -->
</div>
```

how to change nature by default i don't want showing all images . i tired but still showing all images. thank you advance