Скрыть div после нажатия на него
 

Здравствуйте. Есть блок текста с "Читать далее". После нажатие на читать далее все как обычно, блок раскрылся - внизу "Скрыть". Нужно при нажатии на div давать ему display:none
Подскажите как быть?
Код html:
<div class="more-btn">Читать далее...</div>
<div class="more">
Привет
<div class="hide-content">Скрыть</div>
</div>

CSS:
.more {
display: none;
}

JS:
<script type="text/javascript">
$('.more-btn').click(function(){
if($(this).hasClass('active')){
$('.more').slideUp();
$(this).removeClass('active');
} else {
$('.more').slideDown();
}
});
</script>

coveraver,
https://jsfiddle.net/7vv0vee1/

DynkanMaclaud, спасибо за ответ. Скрипт работает. Но мой работает так же. Задача в скрытии дива "Читать далее" (.more-btn), когда раскрывается простыня.

<script type="text/javascript">
$('.more-btn').click(function(){
$('.more').slideDown();
$('.more-btn').hide();
});
$('.hide-content').click(function(){
$('.more').slideUp();
$('.more-btn').show();
})

Работает! Спасибо всем.