**Todo :**

* Hide an element smoothly after clicking on it , like in this page <https://www.alphafx.co.uk/> , when you click on the letter A it fades away smoothly
* Achieve this effect with just HTML,CSS,JavaScript ?

```js
    var foo = document.getElementById('foo');

document.getElementById('hide-button').onclick = function () {
    foo.className = 'hidden';
};

document.getElementById('show-button').onclick = function () {
    foo.className = '';
};
```

```css
       #foo {
    transition-property: visibility, opacity;
    transition-duration: 0s, 1s;
}

#foo.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}
```

```html
<a href="#" id="foo">Text</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
```