How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature.

Original design: https://codepen.io/szlvga/pen/poNOqpO

Adjusted design: https://codepen.io/szlvga/details/yLVQQoY

I want the 'Read more' button to only expand the specific box that I click on, similar to the first Codepen example, rather than expanding all boxes in the row like in the second Codepen.

Any suggestions on how to achieve this? Thank you in advance!

Everything is on codepen.
javascripthtmljquerycssjquery-ui

Answer №1

While your jQuery code is correct, the issue lies within your layout formatting, specifically with flexbox. The .row class has align-items: stretch, causing all items in the same row to expand when one item expands.

To resolve this issue, you can use the following snippet:

.row {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start; /* Align items to top without stretching them */
    flex-wrap: wrap;
}

For more information on flexbox and the align-items property, you can refer to this resource.

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

Implement lazy loading of content on scroll in Grails framework

Currently, I am uploading images and displaying them in a gsp view. My goal now is to implement a functionality where the images load as I scroll down on the page. A friend suggested using jQuery to make an ajax call for this. Can someone please provide g ...

javascriptjqueryajaxgrails

Difficulty encountered with fetching results using jQuery autocomplete with AJAX as the data source

My autocomplete feature is not working properly with my ajax data source. Here is my code: $("#id_q").autocomplete({ source: function (request, response) { $.ajax({ url: "/search/autocomplete/", dataType: "jsonp", ...

javascriptjqueryajaxjquery-autocomplete

Retrieve Element By Class Name in JavaScript

How can I modify the border color at the bottom of the .arrow_box:after? Javascript Solution document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor = "blue"; Despite trying this solution, it seems to be ineffective! For a closer ...

javascripthtmlcss

Next.js App encounters a missing API route (The requested page is not found)

I have been working on a Next.js app and I created an api route for sending emails. Everything is functioning properly in my development environment. However, after deploying to production, I encountered a 404 error with the message "The page could not b ...

javascriptreactjsapinext.jsserver-side-rendering

Eliminating quotation marks from individual elements within a JavaScript array that includes JSON-encoded HTML strings retrieved from a MySQL database using PHP

Performing an Ajax call to fetch data from a MySQL database using the data1.php file with PDO results in HTML strings being stored in an array, encoded into JSON format, and then sent to the Ajax response function for display on a webpage. However, dealing ...

phphtmljsonajaxquotes

What is the best way to write an SQL query to safely insert a record into a table with a dynamic name?

I'm working on a function that can insert a record into a table in PostgreSQL. The catch is that the table name needs to be a parameter for the function, and the column names are determined dynamically. To ensure protection against SQL Injection, I am ...

javascriptsqlnode.jspostgresqlsql-injection

Modifying the nested data organization in Sequelize

I'm looking to adjust the data structure retrieved from an ORM query involving four tables. The product and category tables have a many-to-many relationship, with the product_category table serving as a bridge. Additionally, there's a fourth tabl ...

javascriptobjectormnestedsequelize.js

Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

I am attempting to create a calendar where each day changes its background color between blue and green when clicked, using JavaScript and CSS. It should function similar to a toggle feature. The default color is blue, and I have successfully made the days ...

javascriptcss

What can be done to eliminate the narrow gap between my <input> and <span> components?

Here is what I have: <input style="width: 20px" data-ng-model="row.number" type="text" /> <span style="width: 20px">-</span> Is there a way to eliminate the small gap between the <input> and <span>, as well as centering the ...

htmlcss

Experiencing the 'Page prerendering error' message within Next.js

I encountered a prerender error during the deployment phase that I'm struggling to comprehend: Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error ⨯ useSearchParams() should be wrapped in ...

javascriptreactjsnext.js

Symfony's DataTables is encountering an issue with the JSON response, showing

I have encountered an issue while trying to fetch data from a response within my template table (using DataTables). The error message I receive is as follows: DataTables warning: table id=example - Invalid JSON response. For more information about this ...

javascriptjqueryjsondatatables

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Currently dealing with a bug that occurs when attempting to push the same string into an array that has already been added. The app becomes stuck and prevents the addition of another string. How can I prevent the repeat from causing the app to get stuck w ...

javascripthtmlangularjsarrays

The arrangement of elements varies based on the type of display

I'm still learning HTML and CSS, and I've noticed that the layout of my elements changes depending on the screen size. Everything looks good on my 24" monitor, but some elements overlap on my 15" laptop screen. What could be causing this issue, ...

htmlcss

When attempting to import a component from react-bootstrap, an error is thrown

Every time I try to use a component from 'react-bootstrap', I encounter a strange error. Here is a small example where I am importing the "HelpBlock" component. import PropTypes from 'prop-types'; import React from 'react'; i ...

javascriptreactjsreact-nativereact-bootstrap

Error Encountered with CakePHP Model when Parsing AJAX JSON Data

I encountered a problem with AJAX while developing an application using CakePHP 2.5.3.0 My AJAX request from jQuery to CakePHP is meant to send the user's login and password, expecting a validated JSON response. However, when using a Model method wit ...

phpjqueryajaxjsoncakephp

Is there a way to modify the background color of ::before when hovering over it?

I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...

javascripthtmlcssreactjssass

Changing states in next.js is not accomplished by using setState

Struggling to update the page number using setCurrentPage(page) - clicking the button doesn't trigger any state change. Tried various methods without success. Manually modified the number in useState(1) and confirmed that the page did switch. import ...

javascriptreactjsnext.js

I am unsure about implementing the life cycle in Svelte.js

Unknown Territory I am not well-versed in front-end development. Desire to Achieve I aim to utilize the lifecycle method with SvelteJS. Error Alert An error has occurred and the lifecycle method is inaccessible: ERROR in ./node_modules/svelte/index.m ...

javascriptnode.jsnpmyarnpkgsvelte

Extracting information from an external website in the form of XML data

Trying to retrieve data from an XML feed on a remote website , I encountered issues parsing the XML content and kept receiving errors. Surprisingly, fetching JSON data from the same source at worked perfectly. The code snippet used for XML parsing is as f ...

javascriptjqueryhtmlxmlajax