How to use “show more” on a page or post to show and hide content

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.