How to write Show more and show less in JavaScript

Question

I have a cshtml code like this

  <span class="p1">
                    Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined
                    <button class="More">..Show More</button>
                </span>

When the button inside the span is pressed, it will show all the characters. If we press it again, 100 characters will appear. How can I do it?

Does this answer your question? [How to create a "show more" button and specify how many lines of text can be initially shown](https://stackoverflow.com/questions/12307666/how-to-create-a-show-more-button-and-specify-how-many-lines-of-text-can-be-ini) — Vincent Menzel, Dec 22 '21 at 10:46
@VincentMenzel my button will be hidden inside the text.it doesn't help — Rose Tyler, Dec 22 '21 at 10:47
Where is the res of the content stored? Do you have to make an api reuqest or do you have it stored in a variable ? — Vincent Menzel, Dec 22 '21 at 10:49

score 1 · Answer 1 · answered Dec 22 '21 at 11:01

You can use an event listener and set the parent to the fulltext like so when you click the button

const fullText = 'Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India\'s integrity is being undermined and some more'

// get the more buttons
const buttons = document.getElementsByClassName('More');

// attach an click event listener
Object.values(buttons).forEach(button => {
  button.addEventListener('click', (event) => {
  
    // onclick set the parents content to the fullText
    event.target.parentNode.textContent = fullText
  })
})

<span class="p1">
                    Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book written by Rajiv Malhotra and Aravindan Neelakandan which argues that India's integrity is being undermined
                    <button class="More">..Show More</button>
                </span>

How to write Show more and show less in JavaScript

1 Answers1