Press the "Reveal More" button to expand the content to its full size

I am currently working on coding a "read more" section using a button. I have looked at some existing solutions, but none of them are to my liking. My plan is to create a div that includes all the relevant content.

My goal is to have a div at the bottom with a button that expands the max-height of the div to display the full content without the need for a "Show less" option. Upon clicking the button, I want it to disappear without providing a way to hide the content again.

This is a draft of my concept:

.wrapper {
  border: 1px solid;
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

.content {
  padding: 15px;
}

.show-more-wrapper {
  position: absolute;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

button {
  margin-bottom: 10px;
}
<div class="wrapper">
  <div class="content">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, n...   
    </div>
    <div class="show-more-wrapper">
    <button>Show more</button>
  </div>
</div>

After clicking the button, it should disappear and the content should expand with a smooth animation. I am still figuring out the specifics of this functionality, but this represents my current layout.

I would appreciate any input or suggestions you may have.

javascriptjqueryhtmlcss

Answer №1

One way to achieve this using only CSS is by leveraging the :checked pseudo-class to maintain state, along with the flexibility of a checkbox's label not needing to be in close proximity to the checkbox itself.

In addition, I've customized a span to resemble a button. Typically, users tend to click on anything resembling a button or a "show more" link when they want to view additional content, so it's important to make it visually appealing.

.wrapper {
  position: relative;
  border: 1px solid;
  max-height: 200px;
  overflow: hidden;
}
.content {
  padding: 15px;
}
.show-more-wrapper {
  position: absolute;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#show-more {
  visibility: hidden;
  position: absolute;
  left: -10000px;
}
.button {
  background-color: #f5f5f5;
  border: 1px solid black;
  border-radius: 2px;
  padding: 0 1em;
  font-size: smaller;
}
input:not(:checked) + .wrapper .show-more-wrapper {
  margin-bottom: 10px;
}
input:checked + .wrapper .show-more-wrapper {
  display: none;
}
input:checked + .wrapper {
  max-height: unset;
}
<input type="checkbox" id="show-more" />
<div class="wrapper">
  <div class="content">
  <!-- Add your content here -->
  </div>
  <label class="show-more-wrapper" for="show-more">
    <span class="button">Show more</span>
  </label>
</div>

Answer №2

The comment discussed adding a click event to a button to expand a div. The max-height was set to 1000px as an auto value could not be transitioned. However, there might be a more effective solution for unsetting the height during CSS transitions.

$(".show-more-wrapper").on("click", e => {
  let $el = $(e.currentTarget);
  $el.closest(".wrapper").addClass("expanded");
  $el.remove();
});
.wrapper {
  transition: max-height 1s;
  border: 1px solid;
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

.wrapper.expanded {
  max-height: 1000px;
}

.content {
  padding: 15px;
}

.show-more-wrapper {
  position: absolute;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

button {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="content">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
  </div>
  <div class="show-more-wrapper">
    <button>Show more</button>
  </div>
</div>

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

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

javascriptjqueryhtmlangularjslaravel

Issues with Cross-Origin Resource Sharing (CORS) preventing successful communication with Rails application during POST

I'm trying to log into my app from a different domain. I've configured the server-side headers like so: application.rb: config.action_dispatch.default_headers = { 'Access-Control-Allow-Origin' => '*', 'Access-Cont ...

jqueryruby-on-railsajaxcorsremote-access

Using jQuery to trigger an action when a user clicks on a regular audio element

Is there a way to detect a click on the default audio element of a browser using jQuery? I'm having trouble getting it to work in Chrome. $('audio').click(function(){ alert("You have clicked on an audio player"); }); <script ...

javascriptjqueryaudiohtml5-audio

How can I link a Vue.js webpage with a WordPress site?

Looking to integrate a Vue.js 2 single page into an existing WordPress website? Perhaps you've already got an old WordPress site and now want to develop a new Vue tool or page that can be added seamlessly to the menu. How can this be achieved within W ...

javascriptwordpressvue.js

What are some strategies for managing multiple forms on a single webpage?

I am facing a challenge on a web page where I have a list of questions with different types of answers such as textboxes, checkboxes, etc. The page is generated dynamically and I need to store these answers in a database. What would be the most effective a ...

jqueryasp.net-mvcforms

What is the best approach to have a React page render only the specific component that has changed, rather than re

Recently, I've been facing an issue with a toggle implementation where the page always re-renders the entire content upon the first click of the toggle. Here is a snippet of how it looks: export default function Toggle({isChecked, label}: Props) { r ...

javascriptreactjsnext.js

Choose an input element from an iframe using jQuery

Can anyone assist me with selecting an input field from an iframe using jQuery? The structure of the iframe is as follows: <iframe src="https://checkout.klarna.com" id="klarna-checkout-iframe" name="klarna-checkout-iframe" class="kloading" scrolling="n ...

javascriptjqueryhtmliframe

What is the best way to create a variable within this loop that remains constant and does not update?

I'm having some trouble phrasing this question, but I'm working on creating a loop to display dates for a calendar. So far, everything seems to be working well, except for one thing. My goal is to allow users to click on a date within the calenda ...

phphtml

What could be the reason for the status OVER_QUERY_LIMIT appearing before Status.OK in the Google Maps API response

Why does status OVER_QUERY_LIMIT appear before Status.OK in my code? Here is the code I am using: directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { var distance = Math.ceil(response. ...

jqueryfunctiongoogle-maps-api-3delaytimedelay

Maximizing the worth of itemtype using jQuery: A guide

My goal is to include an 'itemtype' attribute in the body tag, body.page-body.ng-scope.device-lg(itemscope='', itemtype='') I attempted the following method $('body').add(itemtype='t1'); Unfortunately, ...

javascriptjqueryhtmlangularjs

New approach: AngularJS - Using nested ng-click events

Looking for a solution to a problem with my html code: <div class="outerdiv" data-ng-click="resetText()"> <div class="innerdiv" data-ng-click="showText()"> {{ text }} </div> </div> The outer div has an ng-click fun ...

javascriptangularjsangularjs-ng-click

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

javascriptphpjqueryhtmlcss

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)

In my email management system, I utilize a v-data-table to organize emails. When a user clicks on a row, a popup displaying the email details appears. Desired Feature: I am looking to have the rows marked as "readed" (either bold or not bold) after th ...

javascriptcssvue.jsvuetify.js

difficulty in making an https request

My application was developed using OFFICEjs and was functioning properly on LOCALHOST. However, last week it suddenly started throwing an error message - "XHR Error." This issue arose out of nowhere, as I hadn't made any changes to the code over the w ...

javascriptoffice-js

What is the best way to incorporate JavaScript in a repeater?

I am currently working on an asp.net project that involves using a repeater. <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <asp:label ID="lblexp" runat="server" Text="05/11/1 ...

javascriptc#asp.netsubstring

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Is it possible to convert a string to JSON and vice versa without any additional npm packages? I am currently using JSON.Stringfy in my router.js file. Are there any specific npm modules that need to be added to the project in order to use the JSON.Stringf ...

javascriptjsonnode.jsexpressnpm

Tips for eliminating additional white space within a bootstrap row

I'm having trouble removing the extra space on my website while using Bootstrap 5. I've tried various Bootstrap classes like pr-0, mr-0, p-auto, m-auto but none of them seem to work. I also attempted using CSS margin-right: 0; but that didn' ...

javascriptphpcssbootstrap-5

JavaScript Tutorial: Updating the maximum value of a gauge chart

Is there a way to dynamically change both the total and max values in my current code? The maximum value needs to be dynamic based on the filter applied. Here is the code snippet: resource1=[ "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js", "//cd ...

javascripthtmlgaugejsgauge

What steps can I take to ensure that a user is unable to like a photo multiple times even after refreshing the browser?

I am currently exploring ways to replicate a similar like system found on Instagram. Specifically, I want to create a system where if a user likes a photo and then attempts to like it again, it will be unliked - and vice versa. This behavior should persist ...

javascriptreactjs

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Here is the layout of my array object: const foo = {"data":[ [1,'asdf'], [2,'lorem'], [3,'impsum'], [4,'test'], [5,'omg'], ]} I am looking to replicate each array four times and increment the first item ...

javascript