How can I do a toggle visibility version of a read more function?

I am trying to do a toggle(hide and show) version of read more function. For now I can only show the rest of the text, not not hide it.

Any suggestions?

$(document).ready(function(){
    var toggleReadMore = function() {
        $('#read-more').click(function(e) {
            var prev = $(this).prev();
            $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
            $(this).hide();
            $('#read-less').show();
        });
    };
    toggleReadMore();
}());
#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more'>
    READ MORE
  </div>
   <div id='read-less'>
    READ LESS
  </div> 
</div>

1 answer

  • answered 2017-06-17 19:48 James Douglas

    Update your function to this:

    $(document).ready(function() {
      $('#read-more').click(function(e) {
        $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
        $(this).hide();
        $(this).next('#read-less').show();
      });
      $('#read-less').click(function(e) {
        $(this).prev().prev().css('height', '50px');
        $(this).hide();
        $(this).prev('#read-more').show();
      });
    });
    

    You don't really need to shouldn't have the function inside a variable.

    You should also use the latest version of jQuery, which is 3.2.1 and not 2.1.1

    $(document).ready(function() {
      $('#read-more').click(function(e) {
        $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
        $(this).hide();
        $(this).next('#read-less').show();
      });
      $('#read-less').click(function(e) {
        $(this).prev().prev().css('height', '50px');
        $(this).hide();
        $(this).prev('#read-more').show();
      });
    });
    #p {
      height: 50px;
      overflow: hidden;
    }
    
    #read-less {
      display: none;
    }
    
    #read-more,
    #read-less {
      background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 255, 255, 1));
      color: blue;
      cursor: pointer;
      position: absolute;
      bottom: -40px;
      padding: 15px 0;
      text-align: center;
      width: 100%;
    }
    
    #wrapper {
      position: relative;
      width: 400px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div id='wrapper'>
      <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua
        put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
      <div id='read-more'>
        READ MORE
      </div>
      <div id='read-less'>
        HIDE MORE
      </div>
    </div>