Text show more show less html css jquery

Text show more show less html css jquery

Text show more show less html css jquery

For show more show less First add this html design

<div id="footer-description">
	<div class="text show-more-height">
	 <p class="mt-3"> Why do we use it?
	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
	The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, 
	model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
	Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div>
	<div class="show-more">Read More</div>
 </div>

Then write some css code

#footer-description {
    margin-bottom: 20px; 
    position:relative;
  }
  #footer-description .text {
  /*   width: 660px;  */
    margin-bottom: 5px; 
    color: #777; 
    position:relative; 
    font-family: Arial; 
    font-size: 14px; 
    display: block;
  }
  #footer-description .show-more {
    position: relative;
    font-size: 13px;
    padding: 4px 2px;
    text-align: center;
    background: #008ed3;
    color: #fff;
    cursor: pointer;
    max-width: 114px;
    border-radius: 2px;
    transition-duration: 0.5s;
  }
  #footer-description .show-more:hover { 
      color: #000;
  }
  #footer-description .show-more-height { 
    height: 65px; 
    overflow:hidden; 
    transition-duration: 0.5s;
  }

and finally add this jquery in your footer section

 $(".show-more").click(function () {
		if($(".text").hasClass("show-more-height")) {
			$(this).text("Read Less");
		} else {
			$(this).text("Read More");
		}
		$(".text").toggleClass("show-more-height");
	});

thanks

Comments


  • jquery