How to write "elastic text"

Important Remark

The specification of the "elastic text" is not (and is far from) a final version. Backward compatibility in future updates is not guaranteed.
Please note, therefore, that documents based on this version may not work with later versions.

Getting started

In your HTML file, read elastictext.js by

    <script src="path/to/elastictext.js"></script>

Bootstrap 3 and jQuery are also required.

Writing Collapse

Example Code


    Now, the great theorem <a data-et="collapse-myCollapseAria">proves the claim</a>.
    <div class="collapse" id="myCollapseAria">It can be checked by the greatness of the great theorem.</div>

Result

Now, the great theorem proves the claim.

It can be checked by the greatness of the great theorem.

Use a pair of two tags, div and a.

In order to indicate which div tag corresponds to which a, a unique id must be given, say colID. (In the example above, the id is myCollapseArea.)

The a tag must have the attribute data-et="collapse-colID".

The div tag must have the collapse class and the colID id.

The contents of the div tag is hidden in default. As you click the contents of the a tag, that of the corresponding div tag is opened.

Writing Popover

Example Code


    This theorem relates this <a data-et="popover-myPopoverId1">complicated object</a>
    with that <a data-et="popover-myPopoverId2">extremely complicated object</a>.

    <!-- The following script tag should be put BEFORE elastictext.js is read. -->
    <script type="text/javascript"> 
        popovers = {
            myPopoverId1: {
                content: "I have not understood its definition yet."
            },
            myPopoverId2: {
                title: "Yes, extremely!",
                content: "So I gave up understanding it.",
                placement: "right"
            }
        };
    </script>

Result

This theorem relates this complicated object with that extremely complicated object.

First, decide the id for popover, say popID. (In the example above, myPopoverId1 and myPopoverId2 are ids.)

Use a tag to indicate the area for popover. This a tag must have the attribute data-et="popover-popID".

The contents of the popover is written as a dictionary named popovers of Javascript. popovers['popID'] is itself a dictionary, and popovers['popID']['content'] should be a content of the popover.

If the popover should have a title, you can add popovers['popID']['title'].

The popover appears in the bottom by default. You can change this behaviour by adding popovers['popID']['placement']. For this value, "top", "bottom" (default), "right" and "left" are allowed.

Writing Modal

Example Code


    Here, we recall the first <a data-et="modal-important_remark">important remark</a>.

Result

Here, we recall the first important remark.

In order to use the "modal" function, you first have to indicate id, say modID, in the div tag indicating the panel you want to recall. (For example, in this HTML file, the first "Important Remark" panel is given the important_remark id.

Now, use a tag with the attribute data-et="modal-modID". Then, as user clicks the area surrounded by this a tag, the modal appears.