show more Less text with just HTML and JavaScript

Question

I am needing to create a show more less text function  but with just JavaScript and HTML   I can t use any additional libraries such as jQuery and it can t be done with CSS  The sample code I have added displays the  more  text  but not the  less    If someone could point me in the right direction  it would be much appreciated   I ve spent the majority of the day frying my brain over this  as its clearly not the modern way to do it  however  my HTML is    lt html gt   lt head gt   lt script type  text javascript  src  moreless js  gt  lt  script gt   lt  head gt    lt body gt  Lorem ipsum dolor sit amet  lt p gt    lt p id  textarea  gt  lt  -- This is where I want to additional text-- gt  lt  div gt   lt  p gt    lt a onclick  showtext  text    href  javascript void 0    gt See More lt  a gt   lt p gt  Here is some more text   lt  body gt   lt  html gt    and my JavaScript is  moreless js    function showtext     var text  Here is some text that I want added to the HTML file   document getElementById  textarea   innerHTML text

User · Answer

lt script type  text javascript  gt       function showml divId inhtmText                    var x   document getElementById divId  style display            if x   block                       document getElementById divId  style display    none             document getElementById inhtmText  innerHTML  Show More                       if x   none                      document getElementById divId  style display    block             document getElementById inhtmText  innerHTML  Show Less                     lt  script gt     lt p id  show more1  onclick  showml  content1   show more1    onmouseover  this style cursor  pointer   gt Show More    lt  p gt     lt div id  content1  style  display  none  padding  16px 20px 4px  margin-bottom  15px  background-color  rgb 239  239  239    gt    lt  div gt    if more div use like this change only 1 to 2   lt p id  show more2  onclick  showml  content2   show more2    onmouseover  this style cursor  pointer   gt Show More    lt  p gt     lt div id  content2  style  display  none  padding  16px 20px 4px  margin-bottom  15px  background-color  rgb 239  239  239    gt    lt  div gt    demo jsfiddle

User · Answer

Try to toggle height   function toggleTextArea       var limitedHeight    40px     var targetEle   document getElementById  textarea      targetEle style height    targetEle style height           limitedHeight

User · Answer

This is my pure HTML  amp  Javascript solution   var setHeight   function  element  height        if   element             return false            else           var elementHeight   parseInt window getComputedStyle element  null  height  10           toggleButton   document createElement  a            text   document createTextNode     Show more            parent   element parentNode           toggleButton src                toggleButton className    show-more           toggleButton style float    right           toggleButton style paddingRight    15px           toggleButton appendChild text            parent insertBefore toggleButton  element nextSibling            element setAttribute  data-fullheight   elementHeight           element style height   height          return toggleButton           var toggleHeight   function  element  height        if   element            return false            else           var full   element getAttribute  data-fullheight            currentElementHeight   parseInt element style height  10            element style height   full    currentElementHeight   height   full    px            var toggleText   function  element        if   element            return false            else           var text   element firstChild nodeValue          element firstChild nodeValue   text        Show more        Show less        Show more             var applyToggle   function elementHeight        use strict       return function            toggleHeight this previousElementSibling  elementHeight           toggleText this             var modifyDomElements   function className  elementHeight       var elements   document getElementsByClassName className       var toggleButtonsArray             for  var index   0  arrayLength   elements length  index  lt  arrayLength  index              var currentElement   elements index           var toggleButton   setHeight currentElement  elementHeight           toggleButtonsArray push toggleButton              for  var index 0  arrayLength toggleButtonsArray length  index lt arrayLength  index             toggleButtonsArray index  onclick   applyToggle elementHeight             You can then call modifyDomElements function to apply text shortening on all the elements that have shorten-text class name  For that you would need to specify the class name and the height that you would want your elements to be shortened to   modifyDomElements  shorten-text   50px       Lastly  in your your html  just set the class name on the element you would want your text to get shorten    lt div class  shorten-text  gt Your long text goes here    lt  div gt

User · Answer

This should resolve your problem   function toggleSeeMore         if document getElementById  textarea   style display     none             document getElementById  textarea   style display    block           document getElementById  seeMore   innerHTML    See less             else           document getElementById  textarea   style display    none           document getElementById  seeMore   innerHTML    See more                     The complete working example is here  http   jsfiddle net akhikhl zLA5K

User · Answer

With some HTML changes  you can absolutely achieve this with CSS   Lorem ipsum dolor sit amet  lt p id  textarea  gt       lt  -- This is where I want to additional text-- gt      All that delicious text is in here   lt  p gt   lt  -- the show hide controls inside of the following      list  for ease of selecting with CSS -- gt   lt ul class  controls  gt       lt li class  show  gt  lt a href   textarea  gt Show lt  a gt  lt  li gt       lt li class  hide  gt  lt a href     gt Hide lt  a gt  lt  li gt   lt  ul gt    lt p gt Here is some more text lt  p gt    Coupled with the CSS    textarea       display  none     hidden by default        textarea target       display  block     shown when a link targeting this id is clicked        textarea   ul controls       list-style-type  none     aesthetics only  adjust to taste  irrelevant to demo          hiding the hide link when the  textarea is not targeted     hiding the show link when it is selected      textarea   ul controls  hide   textarea target   ul controls  show       display  none        Showing the hide link when the  textarea is targeted     showing the show link when it s not      textarea target   ul controls  hide   textarea   ul controls  show       display  inline-block      JS Fiddle demo   Or  you could use a label and an input of type  checkbox    Lorem ipsum dolor sit amet  lt input id  textAreaToggle  type  checkbox    gt   lt p id  textarea  gt       lt  -- This is where I want to additional text-- gt      All that delicious text is in here   lt  p gt   lt label for  textAreaToggle  gt textarea lt  label gt    lt p gt Here is some more text lt  p gt    With the CSS    textarea          hide by default         display  none        when the checkbox is checked  show the neighbouring  textarea element      textAreaToggle checked    textarea       display  block        position the checkbox off-screen     input type  checkbox         position  absolute      left  -1000px        Aesthetics only  adjust to taste     label       display  block        when the checkbox is unchecked  its default state  show the text     Show   in the label element      textAreaToggle    textarea   label  before       content   Show          when the checkbox is checked  Hide   in the label element  the    general-sibling combinator     is required for a bug in Chrome      textAreaToggle checked    textarea   label  before       content   Hide        JS Fiddle demo

User · Answer

My answer is similar but different  there are a few ways to achieve toggling effect  I guess it depends on your circumstance  This may not be the best way for you in the end   The missing piece you ve been looking for is to create an if statement  This allows for you to toggle your text   More on if statements here   JSFiddle  http   jsfiddle net 8u2jF   Javascript   var status    less    function toggleText         var text  Here is some text that I want added to the HTML file        if  status     less             document getElementById  textArea   innerHTML text          document getElementById  toggleButton   innerText    See Less           status    more         else if  status     more             document getElementById  textArea   innerHTML               document getElementById  toggleButton   innerText    See More           status    less

User · Answer

Hope this Code you are looking for HTML                lt div class  showmore  gt                   lt div class  shorten txt  gt                       lt h4 gt    item Title lt  h4 gt                       lt p gt Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text  lt  p gt                   lt  div gt               lt  div gt    SCRIPT       var showChar   100      var ellipsestext                    showmore   each function                this  find   shorten txt p   addClass  more p   hide              this  find   shorten txt p first   removeClass  more p   show              this  find   shorten txt ul   addClass  more p   hide              you can do this above with every other element         var teaser     this  find   shorten txt p first   html            var con length   parseInt teaser length           var c   teaser substr 0  showChar           var h   teaser substr showChar  con length - showChar           var html     lt span class  teaser txt  gt     c     lt span class  moreelipses  gt     ellipsestext             lt  span gt  lt  span gt  lt span class  morecontent txt  gt     h             lt  span gt            if  con length  gt  showChar                  this  find   shorten txt p first   html html                 this  find   shorten txt p first span morecontent txt   toggle                              showmore   click function              if    this  hasClass  less                    this  removeClass  less              else                 this  addClass  less                        this  find   shorten txt p first span moreelipses   toggle              this  find   shorten txt p first span morecontent txt   toggle              this  find   shorten txt  more p   toggle            return false

User · Answer

I m not an expert  but I did a lot of looking to implement this for myself  I found something different  but modified it to accomplish this  It s really quite simple   The function takes two arguments  a div containing only the words  show more   or whatever  and a div containing the originally hidden text and the words  show less   The function displays the one div and hides the other   NOTE  If more than one show hide on page  assign different ids to divs     Colors can be changed   lt p gt Here is text that is originally displayed lt  p gt    lt div id  div1  gt   lt p style  color red   onclick  showFunction  div2   div1    gt show more lt  p gt  lt  div gt   lt div id  div2  style  display none  gt    lt p gt Put expanded text here lt  p gt    lt p style  color red   onclick  showFunction  div1   div2    gt show less lt  p gt  lt  div gt    lt p gt more text lt  p gt    Here is the Script    lt script gt  function showFunction diva  divb        var x   document getElementById diva       var y   document getElementById divb             x style display    block             y style display    none      lt  script gt

[javascript] show more/Less text with just HTML and JavaScript

Examples related to javascript

Examples related to html