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?
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>