Toggle Read More/read Less Using Javascript?

i am trying to create a read more/read less toggle using javascript and i am kind of stuck on what i am doing wrong. The code seems to have ellipsis but when i click on Read More,

Solution 1:

Why it doesn't work ?

because you are setting the paragraph (#overflow_text) to display: none ...you shouldn't have used the display property as the condition here ... because your whole paragraph will disappear which is not what you want.

solution:

instead you can useoverflow property as the condition (you can use others too except display) and that will work :

functionmyFunction() {
  let text = document.getElementById('overflow_text')
  let toggle = document.getElementById('toggle_text')

  if (text.style.overflow == 'visible') {
    toggle.innerHTML = 'Read More'
    text.style.overflow = 'hidden'
    text.style.textOverflow = 'ellipsis'
    text.style.whiteSpace = 'nowrap'
  } else {
    toggle.innerHTML = 'Read Less'
    text.style.overflow = 'visible'
    text.style.textOverflow = 'string'
    text.style.whiteSpace = 'normal'
  }
}

.myClass {
  height: 150px;
  width : 500px;
}

#overflow_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#toggle_text {
  cursor: pointer;
}

<divclass="container"><divclass="row"><divclass="col-md-6 myClass"><pid='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
        eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
        fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p><spanonClick="myFunction()"id="toggle_text">Read More</span></div></div></div>

Solution 2:

Why reinvent the wheel? use details?

<article><pclass="short-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imper...
  </p><details><summary>Read more</summary><p>
       Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
    </p></details></article>

Solution 3:

Use .onclick(). There is a lot of information available on how to go about using this selector. Try YouTube, or another stackoverflow thread by using .onclick() as a keyword in your search parameters.

Solution 4:

I've modified your feed: the js now toggle the class active

var el = document.querySelector('.toggle_text');
var content = document.querySelector('.overflow_text');

el.onclick = function() {
  content.classList.toggle('show');
  if (content.classList.contains('show')) {
    el.textContent = 'Read Less'
  } else {
    el.textContent = 'Read More'
  }
}

.myClass {
  height: 150px;
}

.overflow_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.show {
  text-overflow: string;
  overflow: visible;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<divclass="container"><divclass="row"><divclass="col-md-6 myClass"><pclass='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
        eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
        fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p><spanclass="toggle_text">Read More</span></div></div></div>