toggle-text.js is a lightweight library (0.3kb minified and gzip’d) to make
togglable text. It has no dependencies and is dead easy to use. This was
originally made for a personal project but it might be useful to others.
Drop toggle-text.js at the bottom of your page. You can bundle it with
other JavaScript files in any order because it doesn’t have any dependency, and
rely only on the presence of a <body> element.
Drop toggle-text.js at the end of your page and you’re done on the JS part.
To mark an element as “togglable”, add the toggle-text class to it, and put
the alternative text in a data-toggle-text attribute.
For example, I heavily use this library for large numbers when you don’t care of what each exact number is, like on social network profiles:
<li class="toggle-text" data-toggle-text="1259">1.2k</li>When the user click on this li element, the 1.2k text will be replaced by
1259. When they click again on it, it’ll go back to the initial text.
Open test/client.html in your browser.
- Fork the repo
- Run the tests suite to ensure all tests pass before you change any code
- Create a new branch
- If you’re fixing a bug, add a test which shows the bug
- Write your code
- Run the tests suite
- Open a pull-request
Don’t know how to fix a bug? Don’t worry, you can still help with a bug report. Start by opening an issue, and describe the problem: what should happen, what happens instead, the browser you’re using, and all steps required for one to reproduce the bug. Thank you!