1

What if you want to use the built-in "WYSIWYG"-button show more, to hide and show text within a post or page?

I started out with misunderstanding the function. I thought the function was actually meant for what I needed, namely hiding part of the content on load, with a "read more" button that would show the remaining content after clicking it.

However, this didn't appear to be the case, which made me search for a solution to use it anyway. You could say, to use it in the way I wanted it to work.

Since I couldn't find a solution online, I had to start developing my own solution, which with just a bit of jQuery turned out exactly as I wanted.

Note If you use the read-more tag as it was intended (to show what part of the text had to be shown as a teaser on the frontpage/archive etc.), you won't be able to use this solution just as is. There is, however, an easy fix to this with a bit of HTML, which I will add to the bottom of my answer.

  • Is this some self promotion or what? WPSE is not some where you can put a blogposting because it could be informative. – Charles May 8 '18 at 11:21
  • I had a question, but instead of asking it, I found a solution. That's a function within Stack Exchange: Answer your own question. I have no idea how this should be self promotion, but hey, whatever floats your boat. – Rvervuurt May 8 '18 at 12:25
  • @Charles Share your code and make others also happy with your knowledge. It will give you a great feeling, try it :) – Patsy Issa May 8 '18 at 13:33
  • @Charles Please take a moment to familiarise yourself with this help center entry Can I answer my own question? – Patsy Issa May 9 '18 at 6:32
1

Any post containing a "read more" tag, had a <p>-tag with inside a span with an ID called more-#, where the # could be any number. It looks like this:

<p>
   <span id="more-1"></span>
</p>

I had to select that specific span, and stored it within a variable:

var $showMore = $('span[id*="more-"]');

To add some kind of text to the show more-span, I used jQuery's .html():

$showMore.html("Read more <i class='icon-down-open-big'></i>");

Of course, anything AFTER the read more-tag had to be hidden on load, which can be done by going up one level (by using .parent()) and then selecting all the following blocks within that parent. This can be done with .nextAll(), which selects all the blocks after the current one (of course until the parent-block closes).

Since this selection is going to used later on, I also stored it within a variable:

var $showMoreNext = $showMore.parent().nextAll();

Now we had all selectors, all we needed to do is hide it on load, and show it when Read more is clicked.

$showMoreNext.hide(); // to hide all elements after the Read more tag

$showMore.on('click', function() {
   $showMoreNext.toggle("slow");
});

The toggle makes it possible to click on the tag again, and hide all the originally hidden content.

So, all that's needed to make an accordion-like expansion after Wordpress' inbuild "read more"-tag, is the following bit of jQuery:

var $showMore = $('span[id*="more-"]');
$showMore.html("Læs mere <i class='icon-down-open-big'></i>");
var $showMoreNext = $showMore.parent().nextAll();
$showMoreNext.hide();

$showMore.on('click', function() {
  $showMoreNext.toggle("slow");
});

Now, what if you actually use the "read more"-function already?

There are two possible solutions:

1) You include the above jQuery only on the pages where you want to "abuse" the "read more"-tag 2) You make a small bit of html that you place in your text on the spot you wish. Just make sure you adapt the jQuery accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.