Show More/Less text

Show/hide more or less text in a div

HTML

<div class="more1">
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>

 <div class="more">
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
  asdasdasdasd<br>
 </div>
  </div>
<div style="float:right">
<a id="btn_more" href="#">Mostrar </a>
<a id="btn_less" href="#">Ocultar </a>
</div>

CSS

.more {
   
    display:block;
    overflow:hidden;
}

#btn_less{
    display:none;
}

JavaScript

$('#btn_more').click(function(e) {
  
    $('#btn_less').toggle();
    $('#btn_more').toggle();
});

$('#btn_less').click(function() {
  
    $('#btn_less').toggle();
    $('#btn_more').toggle();
})