Description
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 or on one of my
posts.
Expounder alternatives and similar libraries
Based on the "Misc" category.
Alternatively, view Expounder alternatives based on common mentions on social networks and blogs.
-
picturefill
A responsive image polyfill for <picture>, srcset, sizes, and more -
list.js
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. -
InversifyJS
A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript. -
Autotrack
Automatic and enhanced Google Analytics tracking for common user interactions on the web. -
mixitup
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more -
surveyjs
Free Open-Source JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout that lets you load and run multiple web forms, or build your own self-hosted form management system, retaining all sensitive data on your servers. You have total freedom of choice as to the backend, because any server + database combination is fully compatible. -
grid
Drag and drop library for two-dimensional, resizable and responsive lists -
json3
A modern JSON implementation compatible with nearly all JavaScript platforms. -
BitSet.js
An arbitrary size Bit-Vector implementation in JavaScript -
Selectable
Touch enabled selectable plugin inspired by the jQuery UI widget. -
Ditox.js
Powerful dependency injection container for building modular apps. -
Dandy UI
Minimalistic UI (boxes, colored text, menu and some more) for Node.js
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Expounder or a related 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 or on one of my
posts.
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://gitcdn.xyz/repo/skorokithakis/expounder/master/expounder.js"></script> <link rel="stylesheet" href="https://gitcdn.xyz/repo/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:
In the land of Mordor, in the fires of <span data-expounder="mount-doom">Mount
Doom</span>, the Dark Lord Sauron forged in secret, a master ring, to control
all others.
<div data-expounded="mount-doom">Mount Doom is that big-ass mountain over there
with the fires coming out of it.</div>
License
This library is released under the MIT license (see the LICENSE file).
Thanks
Thanks go to:
- Stelios, 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.
*Note that all licence references and agreements mentioned in the Expounder README section above
are relevant to that project's source code only.