Tips for Implementing Show and Hide Functionality in JavaScript

I have a piece of cshtml code similar to the following:

  <span class="p1">
                    Breaking India: Western Interventions in Dravidian and Dalit Faultlines is a book authored by Rajiv Malhotra and Aravindan Neelakandan, arguing that India's unity is facing challenges.
                    <button class="More">..Show More</button>
                </span>

When the button within the span is clicked, it will display all the text content. On a subsequent click, only 100 characters will be visible. How can this functionality be achieved?

javascriptc#htmlcssasp.net

Answer №1

If you want to reveal the full text when clicking a button, you can achieve this by using an event listener and updating the parent element's content with the complete text.

const entireText = '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'

// locate all the buttons labeled 'More'
const moreButtons = document.getElementsByClassName('More');

// add a click event listener
Object.values(moreButtons).forEach(button => {
  button.addEventListener('click', (event) => {
  
    // when clicked, update the parent element's content to display the entire text
    event.target.parentNode.textContent = entireText
  })
})
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for accessing a component method in React from a WebSocket callback

Struggling with Javascript and React here. The goal is to update a component's state using push messages from a WebSocket. The issue lies in calling the function handlePushMessage from the WebSocket callback. Here's the code snippet: const Main ...

javascriptreactjs

Enhancing a React modal to enable user input for updating state variables

Is there a way to utilize user input from the page to dynamically create elements in a React.js application? In my app.js file, I have defined some constants at the beginning for mock data: const book1 = [ {id: uuid(), content: 'reflections&apos ...

javascriptreactjsuser-interfacefrontendrefinejs

What is the preferred choice: using camelCase in CSS with Styled Components or Emotion for standard React development?

When I'm coding with React Native, I use the styled properties that follow most of CSS syntax and are formatted in camel case. For instance: //... <Component style={styles.container} /> //... const styles = StyleSheet.Create({ ...

cssreactjsstyled-componentsemotion

The formatting of dates and times may differ between Internet Explorer 10 and Chrome web

When using a web API controller and returning a date object without formatting, the data collection may appear as shown below: public IEnumerable<Event> GetData() { return new NORTHWNDEntities().Events.ToList(); } On the client side ...

c#jqueryajaxweb-servicesasp.net-web-api

What is the best way to transfer variables and functions between JavaScript and Python seamlessly?

I am in the process of building a website using HTML, CSS, and JavaScript, and I am in need of an AI-powered chatbot. I have a Python file that contains the necessary logic for the chatbot (AI, NLTK). Inside the Python file, there is a function called "res ...

javascriptpythonartificial-intelligencenltk

What is preventing me from retrieving an ID value within an IF condition?

I'm trying to create a script that only allows devices with matching IP addresses, but I'm having trouble using an if statement. Whenever I include x.id inside the statement, it doesn't seem to work... any suggestions? <html> <sc ...

javascripthtml

Problem with the mobile site width due to viewport misalignment

Our website is currently experiencing an issue with the viewport, but it seems to only occur on mobile devices: If you visit the site on your mobile device, you may notice a large gap on the right side of the page. Strangely, this problem does not appear ...

htmlcssmobileviewport

Minimize the cyclomatic complexity of a TypeScript function

I have a typescript function that needs to be refactored to reduce the cyclometric complexity. I am considering implementing an inverted if statement as a solution, but it doesn't seem to make much of a difference. updateSort(s: Sort) { if (s.ac ...

javascriptangulartypescriptcyclomatic-complexity

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

javascriptjquerycssajax

What is preventing me from transforming a List into an Array?

My project encountered an error that I'm unsure about. Why am I unable to convert a list to type system.array? System.InvalidCastException: Unable to cast object of type 'System.Collections.Generic.List`1[DataLayer.Appoinment]' to type ...

c#arraysasp.net-mvclistcasting

Remove the blue outline in Fancybox when clicked

Does anyone know how to remove the default blue outline that appears after opening and closing an image or video in Fancybox 3? It disappears when clicked next to, but I would like to get rid of it completely. Any help is appreciated. https://i.stack.imgu ...

javascripthtmlcssfancybox

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

When the textbox fails validation, it should display an error message within the same textbox and prevent the user from proceeding to another textbox

Here is a JavaScript function and a textbox in the code snippet below. The validations work perfectly. The goal is to clear the textbox value and keep the cursor in the same textbox if the validation fails, without moving to other controls. JS: function ...

javascriptasp.net

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

javascriptcsshtml5-canvasoverflowp5.js

What could be causing my router UI in angular.js to malfunction?

Having an issue with routing not functioning as intended, here is the relevant code: $urlRouterProvider. otherwise('/list'); $stateProvider. state('home', { abstract: true, views: { 'header': { templateUrl: &apos ...

javascriptangularjs

Why does 1&&2&&3 result in 3? Could someone clarify this for me?

During a recent interview, I was presented with this question about JavaScript evaluation order. My understanding is that in JavaScript, evaluation proceeds from left to right. So would 1 && 2 result in false? I came across another discussion where it w ...

javascript

Laravel 4 - Error: Uncaught TypeError - Unable to access property 'post' as it is undefined

Here is the script I am using: <script> function selectModSetProd(prodId,setId,objControl){ function ifOK(r){ objControl.style.background="'"+r.color+"'"; } function ifError(e){ alert( ...

javascriptjquerylaravellaravel-4

What is the best method to close a polygon infowindow when hovering over a map marker?

I am currently working on integrating Google Maps which includes a set of polygons representing state boundaries and markers representing cities within each polygon. I want to display information when hovering over a polygon/state. My question is: how can ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Issues with the proper display of Bootstrap 4 in Django are causing problems

I am currently in the process of setting up Django to work with Bootstrap. Despite my efforts, I can't seem to get it functioning correctly and I'm unsure of where I may be making a mistake. Initially, I am just trying to display a panel. You can ...

pythonhtmlcssdjangobootstrap-4