Question: I have three divs. Each will have a different content that will be displayed when user click button so three divs with three buttons.

I want to put the first one as defult when the page is loaded so its content will be displayed.

Here is what I tried - it didnt work as I want please correct my code

```js
$(function() {
  $('#indexed').click();
  $('.target').show();
});
$('.single').click(function() {
  $('.target').hide();
  $('#div' + $(this).attr('target')).show();
});
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container days">
  <div class="menu">
    <a id="indexed" class="single" target="1">today</a>
    <a class="single" target="2">Yesterday</a>
    <a class="single" target="3">Two Days Ago</a>
  </div>

  <section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target">content 2</div>
    <div id="div3" class="target">content 3</div>
  </section>
</div>
```

Answer: 
It already works if you remove the `$('.target').show();` which will show all regardless of anything clicked

Note I added a display:none to the initial view

```js
$(function() {
  $('#indexed').click();
});
$('.single').click(function() {
  $('.target').hide();
  $('#div' + $(this).attr('target')).show();
});
```

```css
.target { display:none }
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container days">
  <div class="menu">
    <a id="indexed" class="single" target="1">today</a>
    <a class="single" target="2">Yesterday</a>
    <a class="single" target="3">Two Days Ago</a>
  </div>

  <section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target">content 2</div>
    <div id="div3" class="target">content 3</div>
  </section>
</div>
```
```
  <section class="target_box">
    <div id="div1" class="target">content 1</div>
    <div id="div2" class="target" style="display:none;">content 2</div>
    <div id="div3" class="target" style="display:none;">content 3</div>
  </section>

```

Seems like you have to hide some content at the first. So only content 1 will be visible.