-5

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.

Mohamd El-Saleh
  • 23
  • 6
  • So what is your question? – actc Dec 01 '16 at 14:55
  • There's a lot of stuff out there, I am sure of it. Seeing no code, suggests that there wasn't much effort put into this. The question is too broad; show us what you tried. Stack isn't about looking for stuff or writing code for you. – Funk Forty Niner Dec 01 '16 at 14:57
  • i have a text in my html code and i need a javascript function when i press the word readmore it will show me the text – Mohamd El-Saleh Dec 01 '16 at 14:59
  • 1
    Possible duplicate of [Creating a "read more" link that extends the content on the page](http://stackoverflow.com/questions/22493727/creating-a-read-more-link-that-extends-the-content-on-the-page) – Mosh Feu Dec 01 '16 at 15:02
  • what have you done so far? – Masivuye Cokile Dec 01 '16 at 15:02
  • Welcome to SO. Please visit the [help] to see what and how to ask. HINT: Post effort and code – mplungjan Dec 01 '16 at 15:02

1 Answers1

0

Its not a good thing to give a full solution, without a proper explanation. So I only made a half-made solution.

html:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ligula id neque pharetra luctus. Nulla in luctus tortor. Nullam non lectus tellus. Pellentesque maximus rutrum dolor, aliquet dapibus lectus dignissim eu. Fusce non blandit risus. Suspendisse fermentum ipsum justo, vitae finibus risus convallis non. Proin euismod euismod orci, suscipit sodales sem fringilla sed. Maecenas iaculis ac elit cursus efficitur. Vivamus at bibendum purus, non molestie libero. Donec fermentum ante non diam bibendum, nec consectetur orci gravida. APPLES FOR SALE!  <br>
<a href="#" id="js-more">Show more!</a>
  <span id="js-hidden">  
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque faucibus felis eget auctor ultricies. Cras vel posuere lorem. Etiam tincidunt maximus magna. Phasellus eu nisi quam. Curabitur dictum felis ut vulputate rhoncus. Aliquam et odio justo. Morbi sit amet lectus sit amet nulla lobortis tempor et et nulla. Proin eget posuere nunc, ac tristique turpis. Curabitur elementum maximus dolor, ac vehicula dui dictum at. Integer libero nisi, pulvinar a turpis pretium, rhoncus suscipit erat. In auctor odio ut odio aliquam malesuada at at quam. Fusce lobortis, diam euismod tempor luctus, diam mi venenatis lectus, sed tempus neque risus et neque. Fusce id vestibulum nunc, at gravida leo. Morbi fringilla dolor ac molestie aliquet.
  </span> 
<p>

js: var hiddenText = document.getElementById('js-hidden'); var toggleButton = document.getElementById('js-more'); hiddenText.style.display = 'none'; hiddenText.className = 'hidden'; 

  function hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }

  toggleButton.onclick = function toggleText(){
    console.log("click happens");

    if(hasClass(hiddenText, 'hidden') == 1)
    {
        console.log("true");
      hiddenText.style.display = 'block'; 
      hiddenText.className = '';     
    }
    else
    {
        console.log("false");
      hiddenText.style.display = 'none'; 
      hiddenText.className = 'hidden'; 
    }

    return false;
  }

https://jsfiddle.net/j769d4tp/9/

Ikkun Asota
  • 26
  • 3