Menu
homeFiles and folders

Tricks with the “read more” link. Hiding and displaying extra text - jQuery plugin How to remove #more from a link

A plugin that allows you to hide part of the text if it exceeds a specified length. A link is added, usually in the form of a “More details” button - when clicked, hidden text is displayed.

Compatible with jQuery versions higher than 1.7.0

JS

A simple plugin call:

$("article").readmore();

Can be called with additional options:

$("article").readmore(( speed: 75, maxHeight: 500 ));

Options

  • speed: 100 (in milliseconds)
  • maxHeight: 200 (in pixels)
  • heightMargin: 16 (in pixels, avoids breaking blocks that are only slightly larger than the specified height - maxHeight)
  • moreLink: "More details"
  • lessLink: "Hide"
  • embedCSS: true (inserts dynamic CSS styles, set false if you will include all the styles yourself in your styles file)
  • sectionCSS: "display: block; width: 100%;" (sets the block style)
  • startOpen: false (by default the block is hidden, if the parameter is true - the text will be shown in full, but with the ability to hide)
  • expandedClass: "readmore-js-expanded" (class added to expanded block)
  • collapsedClass: "readmore-js-collapsed" (class added to the collapsed block)
  • beforeToggle: function() () (function called after clicking on the “Details” or “Hide” button, but before the block is collapsed or expanded)
  • afterToggle: function() () (function called after the block is expanded or collapsed)

If an element has a maximum height set in CSS styles, then the plugin will use exactly this value, and not the option value maxHeight

Callback:

Callback functions beforeToggle() And afterToggle() receive the same arguments: trigger, element And more.

  • trigger: "More details" or "Hide" buttons
  • element: the block that is currently collapsing or expanding
  • more: boolean, true - means that the block is expanded

Example callback.
Here is an example of using the function afterToggle, to scroll to the top of the block when the " button is pressed Hide":

$("article").readmore(( afterToggle: function(trigger, element, more) ( if(! more) ( // the "Hide" button was clicked $("html, body").animate(( scrollTop: element .offset().top ),( duration: 100 ));

You can disable the plugin functionality like this:

$("article").readmore("destroy");

Or you can specify an element on which the plugin should not work:

$("article:first").readmore("destroy");

CSS

By default the plugin inserts the following CSS code per page:

Readmore-js-toggle, .readmore-js-section ( display: block; width: 100%; ) .readmore-js-section ( overflow: hidden; )

Using the plugin option you can change the first rule:

$("article").readmore(( sectionCSS: "display: inline-block; width: 50%;" ));

If you want to use your own style file, then in the plugin settings specify false:

$("article").readmore(( embedCSS: false ));

Good afternoon

Let's start from the beginning in case anyone doesn't know anything about more.

I haven't been to the sea.

- Okay, don’t flood it, I’ve never been to the sea!

- I didn’t have a chance, I wasn’t...

– We’ve already knocked on heaven’s door, pumped ourselves up on tequila, literally saw ourselves off on our last journey, but you haven’t been to the sea?!

- I didn’t have time, it didn’t work out...

“I didn’t know that there’s nowhere in heaven without this?”

Film “Knockin' on Heaven's Door”

How to add more

So, which piece of text to display in the announcement is set using the tag more. This tag divides the article into two parts: introductory (announcement) and continuation.

In the WordPress editor, the more tag can be inserted using the button in the toolbar.

1. Visual editor mode:

2. Text editor mode:

In text mode, you can also manually split the entry: just write

And now important information that not everyone knows!

So, there is an elementary way to give each link after the announcement its own unique text!

This can be done by simply writing the desired text inside the structure with more. Like this:

You may ask why do this? Also write down the text each time.

To be honest, I’m like that myself =) I’ve already published 84 articles, and I’m just “coming out of the woods” about this.

How to change the text?

1. The first - easiest way - is to add your text (usually in index.php) to the_content function

2. Second method using a hook the_content_more_link. Just add the following code in and set your desired link text.

function my_more_link($more_link, $more_link_text) ( return str_replace($more_link_text, "Continue reading...", $more_link); ) add_filter("the_content_more_link", "my_more_link", 10, 2);

This method is convenient because you don’t have to search through the template files to find exactly where the_content is used (this doesn’t have to be in index.php, it can be content.php or whatever.) Here you work only in the functions.php file.

3. In the third point, I’ll simply save for history the method using a WordPress custom field.

ID, "custom_more_text", true);

if(!$custom_more) ( $custom_more = "Continue reading article"; ) the_content($custom_more); ?>Entering text directly into

, of course, simpler and clearer. Here just adjust the function call the_content

in one of two ways.

How to remove #more from a link