https://github.com/skorokithakis/expounder

A library for explaining things in HTML.
https://github.com/skorokithakis/expounder

Last synced: about 2 months ago
JSON representation

A library for explaining things in HTML.

• Host: GitHub
• URL: https://github.com/skorokithakis/expounder
• Owner: skorokithakis
• License: mit
• Created: 2016-03-13T23:34:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-08-09T19:03:18.000Z (about 2 years ago)
• Last Synced: 2024-07-23T13:04:39.291Z (2 months ago)
• Language: JavaScript
• Size: 844 KB
• Stars: 525
• Watchers: 9
• Forks: 24
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Expounder

Expounder is a small JS library that implements a concept I had for adaptable

experience levels in educational texts. In more concrete terms, expounder allows

authors of tutorials to hide their explanations if they expect readers to be

familiar with a concept. The author can choose to add a link to the concept,

which will appear underlined, and the reader can click on it to expand the next

few sentences, paragraph or any other element that explains the concept.

This way, people familiar with a term don't need to spend a paragraph reading

about it or waste time (and potentially miss other useful information) skimming

ahead. You can see an example in the `examples` directory, on the [Expounder

page](https://skorokithakis.github.io/expounder/) or on [one of my

posts](https://www.stavros.io/posts/building-cheap-home-sensorcontroller/).

Here's a demo GIF, from the Expounder page:

![](misc/animation.gif)

## Usage

Expounder.js can be added to your site in two simple steps:



Download and include expounder.js and expounder.css (or the minified

   version, for production) in your page. Alternatively, just add these two

   lines to your HTML:

<script src="https://cdn.jsdelivr.net/gh/skorokithakis/expounder@master/expounder.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/skorokithakis/expounder@master/expounder.css" />

   

   


   Add data-expounderwith arbitrary IDs for span elements that will act

   as hooks that expand areas, and data-expounded for the areas to be expanded.

   



For example:

```html

In the land of Mordor, in the fires of Mount

Doom, the Dark Lord Sauron forged in secret, a master ring, to control

all others.

Mount Doom is that big-ass mountain over there

with the fires coming out of it.

````


If you want the links to be collapsible again after they've been clicked, you can

include the script with `data-default-collapse="true"` in the `script` tag (see

the `examples/` dir for usage), though this is discouraged for usability.

## License

This library is released under the MIT license (see the LICENSE file).

## Thanks

Thanks go to:

* [Stelios](https://github.com/stelabouras), who wrote the code for the entire

  thing.

## Changelog

* 0.0.3 -- 4/3/2016 Updated the API, added the ability to expand every element with the same data-expounded id from a single expounder link.

* 0.0.2 -- 4/1/2016 Added contract option with data-expounder-c attribute.

* 0.0.1 -- 3/13/2016 Initial release.