What is the best way to conceal a section of a div using CSS/React?

I am attempting to create a design where the entire content of a div is displayed initially, and then after clicking a button labeled "show less", only 300px of the content will be shown with the button changing to "show more".

<div className="bodyText">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc sit amet est sollicitudin tempus. Etiam ultricies velit dolor, et rutrum ante fermentum quis. In enim nibh, imperdiet id pulvinar at, euismod id justo. Sed nisl eros, viverra ut purus et, hendrerit dictum risus. Proin ut massa libero. Vestibulum eget nisi laoreet arcu vulputate mollis non eu ipsum. Praesent tempus ut felis id consequat. Duis tincidunt id nulla vitae suscipit. Sed nec erat varius turpis elementum mattis at eu dolor.

Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend.

</div>

Answer №1

Here is an example of how to accomplish that.

<div class="bodyText">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc sit amet est sollicitudin tempus. Etiam ultricies velit dolor, et rutrum ante fermentum quis. In enim nibh, imperdiet id pulvinar at, euismod id justo. Sed nisl eros, viverra ut purus et, hendrerit dictum risus. Proin ut massa libero. Vestibulum eget nisi laoreet arcu vulputate mollis non eu ipsum. Praesent tempus ut felis id consequat. Duis tincidunt id nulla vitae suscipit. Sed nec erat varius turpis elementum mattis at eu dolor.

  Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend.

   Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend.

   Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend.

</div>
<div>
<input type="button" onclick="toggleBodyText()" value="Show Less" id="ButtonShow" />
</div>

<script>
function toggleBodyText() {
var btn=document.getElementById('ButtonShow');
var value=btn.value;
var div = document.querySelector('.bodyText');
if(value=='Show Less') 
{
   div.style.height='300px';
   div.style.overflowX='scroll';
   div.style.overflowY='hidden';
   btn.value='Show More';
}
else 
{
   div.style.height='auto';
   div.style.overflowX='inherit';
   div.style.overflowY='hidden';
   btn.value='Show Less';
}
}
</script>

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 Avoiding Inheritance of a Specific Method

Let's say we have two classes, A and B. Class B extends class A, inheriting all of its methods. It is also possible to override these inherited methods. The question at hand is whether it is possible to prevent class B from inheriting a specific metho ...

Navigating to a different URL in a remoteMethod with Loopback and Express

Can anyone provide any guidance on how to redirect to a URL within a model function or remoteMethod? I've been struggling to find documentation on this. Here is the code snippet for reference: Model Function (Exposes /catch endpoint) Form.catch = func ...

jQuery functions as expected in a test environment, but encounters issues when implemented on a live website

Recently, I implemented a piece of code that enables content to be copied from one div to another when a button is clicked: <a id="btn123">CLICK ME</a> <div id="test1"></div> <div id="test2"> <h1>Heading</h1> < ...

What is the reason behind Google Font's decision to preconnect to fonts.googleapis.com?

I've been looking to incorporate the Quicksand Font into my website, and Google suggested adding the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="h ...

Attempting to iterate through a Query each loop for the Raphael object

I'm currently facing a challenge with creating a jQuery .each() function to iterate through an array that I've constructed from a Raphael object. While I am able to achieve this using a traditional JavaScript for-loop: for (var i = 0; i < reg ...

Why is my <div> unable to recognize my <p> as part of its content?

When I tried to display an image, h3, and p inside a div tag, only the image and h3 showed up within the div. Adding a background-color helped me realize that my p element was actually outside of the div. Below is the code in question: <div class="m ...

Unable to obtain return value in AngularJS controller or view

I have been working on a geolocation and reverse geocoding application. I have a function that is triggered by a button click to call a function in my controller which then calls my service. While the service is able to retrieve values, I am unable to get ...

Vue-incredible swiper, a pair of components swipe using buttons adjacent to one another

I am currently using vue-awesome-swiper and encountering an issue. The swipers on my page have buttons (prev slide, next slide) for navigating through slides. However, when I include two swipers on the same page, the buttons of one swiper end up affecting ...

What is the best way for the parent component to initiate an http call, update its state, and then distribute that state to all child components

Recently, I encountered an issue while trying to call axios.get('{link here}') from the componentDidMount() method of the parent component: class Parent extends React.Component { constructor(){ super(); this.state = { stuff: [] } ...

The issue with the left border color not functioning in JavaScript

Attempting to alter the border-left-color property using this script is resulting in a Uncaught SyntaxError: Unexpected token -. Is border-left-color actually supported? Javascript function logoChange() { var description = new Array (); description[0] ...

Saving a JSON array into separate JS variables using AJAX

I need to extract multiple values from a mySQL Query and store them in different JS Variables. Below is the AJAX code in my JS file: $.ajax({ async:false, url: "get_data.php", type: "POST", data: { d1: 'd ...

Trigger a change event for a Material Checkbox by referencing its unique identifier

<div *ngFor="let cus of deselectedList | keyvalue" (click)="clickCheckBox('customer_'+cus.key+'_checkbox')"> {{cus.key}} <mat-checkbox id="customer_{{cus.key}}_checkbox" (change ...

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

Distinguishing between a regular JavaScript variable and one annotated with a dollar sign

Many responses have addressed the question of using a dollar sign in JavaScript variables. In essence, the dollar sign functions as an identifier in JavaScript variables. However, I am curious if there are other distinctions between regular variables and ...

Is there a way to stop a setTimeout function in React before it is triggered?

In my application, I have set up a functionality where pressing a button starts the clock countdown. If no action is taken within 23 seconds (23000), the state changes to "this.state.user". This part is working correctly. However, if you click on the elem ...

Updating the DOM using jQuery after receiving an AJAX response

I'm grappling with the most effective way to modify the DOM after receiving an AJAX response. I prefer to showcase the code rather than attempt to articulate my dilemma. // page contains several checkboxes $("input[type='checkbox']").live(& ...

Issues involving the handleChange function in React can be a frustrating and common hurdle

I am encountering an issue with the handleChange function in my React project. Upon loading data from JSONPlaceholder and clicking on the 'Edit' button, a form is displayed with the selected user's information. However, when trying to edit ...

What are the best ways to combine, organize, and iterate through JavaScript objects?

When I run a loop, it returns a combination of integer values and objects as shown below: 2 {firstName:"John", lastName:"Doe", age:28, eyeColor:"blue"} 3 {firstName:"Jane", lastName:"Doe", age:22, eyeColor:"brown"} 1 {firstName:"Jack", lastName:"Doe", age ...

Using a union type annotation when passing into knex will result in the return of an unspecified

Knex version: 2.5.1 Database + version: postgres15 When passing a union typescript definition into knex as a type annotation, it returns the type any. However, by using type assertion as UserRecord, we can obtain the correct UserRecord type. It is my un ...

Understanding the behavior of the enter key in Angular and Material forms

When creating forms in my MEAN application, I include the following code: <form novalidate [formGroup]="thesisForm" enctype="multipart/form-data" (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$ev ...