How to hide show more text within a certain length like youtube

Question

I want to have a text to only be a certain amount of characters length and after that length  I want to put a link to reveal the full length of the text    The link will be  more      And once the user clicks the link  more    the rest of the text will slide down    How would I accomplish this   Heres an example   blah blah blah blah blah  more       When the user clicks  more     it will show the entire text   NOTE  I am taking a about data in a table row table cell  not just any text

User · Answer

I know this question is a little old  and has had it s answer selected already  but for those wanting another option that re coming across this question through Google  like I did   I found this dynamic text shortener   Dynamically shortened Text with    Show More    link using jQuery  I found it was better because you could set the character limit  rather than extra spans in the code  or setting a specific height to a container   Hope it helps someone else out

User · Answer

Here s a really simple solution that worked for me    lt span id  text  gt Extra Text lt  span gt   lt span id  more  gt show more    lt  span gt   lt span id  less  gt show less    lt  span gt    lt script gt       text   hide         less   hide         more   click  function            text   show           less   show           more   hide              less   click  function            text   hide           less   hide           more   show          lt  script gt

User · Answer

Put text inside  Your Text Here and copy the script inside your js file  You are ready to go  Working code for see more   and see less   options  Works for dynamic as well as static texts    lt div class  item  gt    Your Text Here  lt  div gt    lt script type  text javascript  gt     function       to make sure the script runs after page load             item   each function event      select all divs with the item class           var max length   150     set the max content length before a read more link will be added           if   this  html   length  gt  max length      check for content length             var short content       this  html   substr 0 max length      split the content in two parts            var long content      this  html   substr max length              this  html short content   lt a href     class  read more  gt Show More lt  a gt                     lt span class  more text  style  display none   gt   long content   lt  span gt     lt a href     class  read less  style  display none   gt Show Less lt  a gt        Alter the html to allow the read more functionality               this  find  a read more   click function event      find the a read more element within the new html and bind the following code to it               event preventDefault       prevent the a from changing the url                this  hide       hide the read more button                  read less   show       show read less button                 this  parents   item   find   more text   show       show the  more text span                            this  find  a read less   click function event              event preventDefault                 this  hide       hide the read more button                  read less   hide                  read more   show                 this  parents   item   find   more text   hide                                            lt  script gt

User · Answer

Updated  Hussein solution with preview height that will adapt to the paragraph number of lines   So with this bit of code    - You can choose the number of lines you want to show in preview  it will works for all screen sizes  even if font-size is responsive  - There is no need to add classes or back-end editing to separate preview from whole content   http   jsfiddle net 7Vv8u 5816   var h      div   0  scrollHeight   divLineHeight   parseInt    div   css  line-height     divPaddingTop   parseInt    div   css  padding-top     lineToShow   2  divPreviewHeight   divLineHeight lineToShow - divPaddingTop     div   css  height   divPreviewHeight         more   click function e      e stopPropagation         div   animate        height   h             document  click function          div   animate        height   divPreviewHeight

User · Answer

HTML   lt div gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt asdasdasdasd      lt br gt   lt  div gt    lt a id  more  href     gt Read more  lt  a gt   lt a id  less  href     gt Read less  lt  a gt    CSS   lt style type  text css  gt      div          width 100px          height 50px          display block          border 1px solid red          padding 10px          overflow hidden         lt  style gt        jQuery   lt link rel  stylesheet   href  http   ajax googleapis com ajax libs jqueryui 1 8 9 themes start jquery-ui css   type  text css  media  all    gt    lt script type  text javascript  gt  var h      div   0  scrollHeight        more   click function e       e stopPropagation          div   animate          height   h              more   hide           less   show             less   click function e             more   show            less   hide           document  click function            div   animate            height    50px              document  ready function             less   hide        lt  script gt

User · Answer

Another possible solution that we can use 2 HTML element to store   brief and complete text  Hence we can show hide appropriate HTML   element  -       lt p class  content description  id  brief description  style  display  block   gt  blah blah blah blah blah   lt  p gt  lt p class  content description  id  complete description  style  display  none   gt  blah blah blah blah blah with complete text  lt  p gt      jQuery code to toggle both paragraph       function                toggle content   on                   click   function                                        complete description   toggle                                        brief description   toggle                                    if      complete description   css  display       none                                           this  text  More                                           else                                        this  text  Less

User · Answer

So much answers and all them good  but I will suggest my own  maybe it will be usefull for somebody   We have HTML in the template    lt div class  listing-item-excerpt  id  listing-item-excerpt- lt     task  id     gt   gt       lt    mb substr  txt  0  150    gt  lt span class  complete txt  gt  lt    mb substr  txt  150    gt  lt  span gt       lt a href  javascript  show more less  lt     task  id     gt   void 0    class  more less btn  data-more-txt   lt            show more     gt   data-less-txt   amp nbsp  lt        show less     gt   data-state  0  gt  lt            show more     gt  lt  a gt   lt  div gt    JS function for toggling which   function show more less task id         var btn   jQuery   listing-item-excerpt-    task id  find   more less btn        var txt container   jQuery   listing-item-excerpt-    task id  find   complete txt        var state   parseInt jQuery btn  data  state    10       if  state     0            jQuery txt container  show            jQuery btn  text jQuery btn  data  less-txt             jQuery btn  data  state   1         else           jQuery txt container  hide            jQuery btn  text jQuery btn  data  more-txt             jQuery btn  data  state   0

User · Answer

For those who just want a simple Bootstrap solution        lt style gt        collapse in   display  inline  important         lt  style gt       Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the      lt span class  collapse  id  more  gt        1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged       lt  span gt       lt span gt  lt a href   more  data-toggle  collapse  gt      lt i class  fa fa-caret-down  gt  lt  i gt  lt  span gt    Here s a CodePen example   Remember to include jquery and bootstrap min js in your header   If you aren t using fontawesome icons  change  lt i class  fa fa-caret-down  gt  lt  i gt  to any icon of your choice

User · Answer

If you need some complete solution  you can use this    http   jsfiddle net 7Vv8u 2703   JS  jQuery   var text       text-overflow         btn       btn-overflow           h   text scrollHeight    if h  gt  120        btn addClass  less        btn css  display    block       btn click function e       e stopPropagation       if  btn hasClass  less            btn removeClass  less          btn addClass  more          btn text  Show less           text animate   height   h        else         btn addClass  less          btn removeClass  more          btn text  Show more          text animate   height    120px                 HTML    lt script type  text javascript  src  http   code jquery com jquery-latest min js  gt  lt  script gt   lt div class  text-overflow  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  div gt   lt a class  btn-overflow  href     gt Show more lt  a gt     CSS   text-overflow     width 250px    height 120px    display block     overflow hidden    word-break  break-word    word-wrap  break-word      btn-overflow     display  none    text-decoration  none

User · Answer

You can use like this      jsgrid-cell   each function i v       var txt   v  text        if txt length gt 100           var shortText txt substring 0  100             lt span onclick    this  hide     this  next   toggle     gt                                 lt  span gt              lt span  style  display none  gt                txt substring 100  txt length             lt  span gt               v  html shortText

User · Answer

Show More  Show Less  Only when needed  No JQuery  I needed this functionality for an RSS feed on our company s website  This is what I came up with    x000D   x000D     Create Variables x000D  var allOSB       x000D  var mxh       x000D   x000D  window onload   function     x000D       Set Variables x000D    allOSB   document getElementsByClassName  only-so-big    x000D     x000D    if  allOSB length  gt  0    x000D      mxh   window getComputedStyle allOSB 0   getPropertyValue  max-height    x000D      mxh   parseInt mxh replace  px         x000D       x000D         Add read-more button to each OSB section x000D      for  var i   0  i  lt  allOSB length  i      x000D        var el   document createElement  button    x000D        el innerHTML    Read More   x000D        el setAttribute  type    button    x000D        el setAttribute  class    read-more hid    x000D         x000D        insertAfter allOSB i   el   x000D        x000D      x000D   x000D       Add click function to buttons x000D    var readMoreButtons   document getElementsByClassName  read-more    x000D    for  var i   0  i  lt  readMoreButtons length  i      x000D      readMoreButtons i  addEventListener  click   function      x000D        revealThis this   x000D         false   x000D      x000D     x000D       Update buttons so only the needed ones show x000D    updateReadMore    x000D    x000D     Update on resize x000D  window onresize   function     x000D    updateReadMore    x000D    x000D   x000D     show only the necessary read-more buttons x000D  function updateReadMore     x000D    if  allOSB length  gt  0    x000D      for  var i   0  i  lt  allOSB length  i      x000D        if  allOSB i  scrollHeight  gt  mxh    x000D          if  allOSB i  hasAttribute  style      x000D            updateHeight allOSB i    x000D            x000D          allOSB i  nextElementSibling className    read-more   x000D          else   x000D          allOSB i  nextElementSibling className    read-more hid   x000D          x000D        x000D      x000D    x000D   x000D  function revealThis current    x000D    var el   current previousElementSibling  x000D    if  el hasAttribute  style      x000D      current innerHTML    Read More   x000D      el removeAttribute  style    x000D      else   x000D      updateHeight el   x000D      current innerHTML    Show Less   x000D      x000D    x000D   x000D  function updateHeight el    x000D    el style maxHeight   el scrollHeight    px   x000D    x000D   x000D     thanks to karim79 for this function x000D     http   stackoverflow com a 4793630 5667951 x000D  function insertAfter referenceNode  newNode    x000D      referenceNode parentNode insertBefore newNode  referenceNode nextSibling   x000D    x000D   import url  https   fonts googleapis com css family Open Sans 600    x000D   x000D     x000D    before  x000D    after   x000D    box-sizing  border-box  x000D    x000D  html  x000D  body   x000D    height  100   x000D    margin  0  x000D    padding  0  x000D    width  100   x000D    x000D  body   x000D    font-family   Open Sans   sans-serif  x000D    x000D  h1   x000D    text-align  center  x000D    x000D   main-container   x000D    margin  30px auto  x000D    max-width  1000px  x000D    padding  20px  x000D    x000D   only-so-big p   x000D    padding  0  x000D    margin  0  x000D    x000D  p   x000D    font-size  15px  x000D    line-height  20px  x000D    x000D  hr   x000D    background   ccc  x000D    display  block  x000D    height  1px  x000D    width  100   x000D    x000D   x000D   x000D     x000D    NECESSARY SECTION x000D     x000D   only-so-big   x000D    background  rgba 178  252  255   3   x000D    height  100   x000D    max-height  100px  x000D    overflow  hidden  x000D    -webkit-transition  max-height  75s  x000D    transition  max-height  75s  x000D    x000D   x000D   read-more   x000D    background  none  x000D    border  none  x000D    color   1199f9  x000D    cursor  pointer  x000D    font-size  1em  x000D    outline  none   x000D    x000D   read-more hover   x000D    text-decoration  underline  x000D    x000D   read-more focus   x000D    outline  none  x000D    x000D   read-more  -moz-focus-inner   x000D    border  0  x000D    x000D   hid   x000D    display  none  x000D    x000D   lt div class  main-container  gt  x000D         lt h1 gt Controlling Different Content Size lt  h1 gt  x000D         lt p gt We re working with an RSS feed and have had issues with some being much larger than others  content wise   I only want to show the  Read More  button if it s needed  lt  p gt  x000D         lt div class  only-so-big  gt  x000D           lt p gt This is just a short guy  No need for the read more button  lt  p gt  x000D         lt  div gt  x000D         lt hr gt  x000D         lt div class  only-so-big  gt  x000D           lt p gt This one has way too much content to show  Best be saving it for those who want to read everything in here  lt  p gt  x000D           lt p gt Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia x000D            voluptas sit aspernatur aut odit aut fugit  sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt  Neque porro quisquam est  qui dolorem ipsum quia dolor sit amet  consectetur  adipisci velit  sed quia non numquam eius modi THE END  lt  p gt  x000D         lt  div gt  x000D         lt hr gt  x000D         lt div class  only-so-big  gt  x000D           lt p gt Another small section with not a lot of content lt  p gt  x000D         lt  div gt  x000D         lt hr gt  x000D         lt div class  only-so-big  gt  x000D           lt p gt Make Window smaller to show  Read More  button  lt br gt  totam rem aperiam  eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo  Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit  sed  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

The secret about this effect  is wrapping the parts that you want to control with HTML tags       more   toggle function          this  text  less     siblings   complete   show           function          this  text  more     siblings   complete   hide                 lt span class  teaser  gt text goes here lt  span gt    lt span class  complete  gt  this is the  complete text being shown lt  span gt    lt span class  more  gt more    lt  span gt    Online demo here  http   jsfiddle net zA23k 215

User · Answer

more   click function e        e stopPropagation           div   css            height    auto                document  click function            div   css            height    40px              Check working example at http   jsfiddle net 7Vv8u 4   With Animation http   jsfiddle net 7Vv8u 5   Click on Read more to expand the text  Click outside to minimize it again

User · Answer

This is another solution using clickable articles  can of course be changed to anything    http   jsfiddle net SqJ53 2   Edit  If you want to use CSS animation  you must use MAX-HEIGHT instead of HEIGHT  Javascript      container article   click function               this  toggleClass  expand         CSS   container       position  relative      width  900px      height  auto     container article       position  relative      border  1px solid  999      height  auto      max-height  105px      overflow  hidden      -webkit-transition  all  5s ease-in-out      -moz-transition  all  5s ease-in-out      transition  all  5s ease-in-out      container article hover       background   dadada     container article expand       max-height  900px      HTML   lt div class  container  gt       lt article class  posts-by-cat article-222  gt           lt h3 gt  lt a href  http   google se  gt Section 1 lt  a gt  lt  h3 gt           lt p gt This is my super long content  just check me out  lt  p gt           lt p gt This is my super long content  just check me out  lt  p gt           lt p gt This is my super long content  just check me out  lt  p gt           lt p gt This is my super long content  just check me out  lt  p gt       lt  article gt        lt article class  posts-by-cat article-222  gt           lt h3 gt  lt a href  http   google se  gt Section 2 lt  a gt  lt  h3 gt           lt p gt This is my super long content  just check me out  lt  p gt           lt p gt This is my super long content  just check me out  lt  p gt           lt p gt This is my super long content  just check me out  lt  p gt           lt p gt This is my super long content  just check me out  lt  p gt        lt  article gt   lt  div gt

[jquery] How to hide/show more text within a certain length (like youtube)

Examples related to jquery