Javascript-форум - Плавное показать/скрыть блок

Битый час долбил гугл как реализовать это на чистом js, но все поиски приводят к одному и тому же тупику, что хоть застрелись... Ну или ткните носом на ссылку с готовой реализацией.
В общем простая задача в следующем: Есть блок, его нужно показывать через div, и через него же скрывать, по дефолту он скрыт (display:none).
Реализовать я смог, но мне нужно сделать чтобы скрывался/показывался блок плавно, а не сразу. Также если блок скрыт, то в блоке #filterstools_hider должен отображаться img1.png, а второй скрыт и наоборот если блок показан.
Что имеется:

<div id="tools">
   <span>имя</span>
   <span>фамилия</span>
   <span>возраст</span>
</div>
<div id="hider" onclick="hideshow(); return false;">
   <img src="img1.png">
   <img src="img2.png">
</div>

function hideshow() {
    document.getElementById('tools').style.display=(document.getElementById('tools').style.display != 'block')? 'block':'none';
    return true;
}

</script>