Как сделать кнопку/ссылку «смотреть полностью»?

$(document).ready(function(){
        $text=$('.main-text');
        
        $('.main-text-more',$text).click(function(e){
            if($text.hasClass('hide')) {
                $text.removeClass('hide');
            } else {
                $text.addClass('hide');
            }
        }); 
 });

<div class="main-text hide">
  <p>Текст</p>
</div>
<div class="main-text-more">Подробнее</div>

.main-text {
    max-height: 3000px;
    position: relative;
    overflow: hidden;
    -webkit-transition: max-height 0.7s ease-out;
    -moz-transition: max-height 0.7s ease-out;
     -o-transition: max-height 0.7s ease-out;
    transition: max-height 0.7s ease-out; 
}
.main-text.hide {
    max-height: 400px;
}