1. Home
2. javascript - Read more button with jquery

724 votes

2 answers

javascript - Read more button with jquery

Get the solution ↓↓↓

I have a full the content. When I click on the button, immediately all the blocks are shown completely, but I need to completely show only the block that I clicked on php

 <?php if ( $query->have_posts() ) : ?>
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
           <div class="content"><?php the_content(); ?></div>
           <button class="show-more">Show more</button>
    <?php endwhile; ?>
Copy code

css

.content { max-height: 20px; overflow: hidden; }
.show-more { margin-top: 15px; }
Copy code

jquery

jQuery(document).ready(function() {
    jQuery('.show-more').click(function() {
    jQuery('.content').css('max-height', 'none');
    jQuery(this).remove();
  });
});
Copy code

Undefined asked

2021-12-5

Write your answer

---

434

votes

Answer

Solution:

When you target.content you are selecting all elements in that class. You may switch to ID selector or using .prev() to select only the previous element:

jQuery(this).prev(".content").css('max-height', 'none');
Copy code

You should also removeoverflow:hidden:

jQuery(this).prev(".content").css({'max-height':'none','overflow':'auto'});
Copy code

Write your answer

---

822

votes

Answer

Solution:

Find the closest.content

Try this

jQuery(document).ready(function() {
    jQuery('.show-more').click(function() {
    jQuery(this).closest('.content').css({'max-height':'none','overflow':'auto'});
    jQuery(this).remove();
  });
});
``
Copy code

Write your answer

---

Share solution ↓

Additional Information:

Date the issue was resolved:

2021-12-5

Link To Source
Link To Answer People are also looking for solutions of the problem: illegal string offset

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

---

Similar questions

Find the answer in similar questions on our website.

748 jquery - Create a dynamic 'Read More' link within custom content using php

540 javascript - create LIKE button using AJAX - laravel 5

571 php - Close current web page onclick button using javascript?

680 php - reading from MySQL is faster or reading from a file is faster?

495 javascript - jquery doesnt run in php app

275 javascript - JQuery Validation Plugin Remote Validation Error always fires

579 javascript - Switching from jquery live to on doesn't work

474 how can I read a file in my local machine using php or jquery

703 javascript - Can't read big pdf file with XMLHttpRequest

356 javascript - Pagination with dynamic data tables using jquery plugin and php

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

About the technologies asked in this question

PHP

PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites. The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/

JavaScript

JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/

JQuery

JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience.
https://jquery.com/

CSS

CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language. It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css