Add a read-more directive

[chrisjsewell]

As discussed in https://github.com/executablebooks/tcs_to_jb/issues/3, It would be good to have a component like:

.. read-more::

    Here's some text which will end with the clickable ellipses

    +++

    Then here's the hidden text, which will exand below on clicking the ellipses

This component could be visualised in a number of "styles":

1. As a progressive disclosure, akin to https://primer.style/design/ui-patterns/progressive-disclosure#ellipsis-icon (an example implementation is http://jsfiddle.net/s2hmvg7o/)

2. As a call out, akin to http://www.bigfootjs.com/
3. As a side note like:

[choldgraf]

Is there a reason you imagine this as a directive vs. as a role? I imagined syntax along the following:

here's my paragraph content, and either a read more tooltip in-line {rm}`like this`, or after the
paragraph content finishes, there could be a readmore tag at the end like so.
{rm}`Here's my longer readmore text, links etc at the end`

My thinking there was that, as you suggested in https://github.com/executablebooks/tcs_to_jb/issues/3, this would be best for short extra bits of information, while longer bits of content (that would warrant multiple lines and a directive) would be more suited for something like an "aside" in the margin

[chrisjsewell]

No this directive is for the long form content, not the tooltips.
Although I mention the three styles, really I think this directive is most suited to (1), whereby you can have an arbitrarily long section of text. As you mention (2) and (3) are probably only really suited to short amounts of text (single paragraph).
Perhaps there could be a separate directive/role for that.