Home

Awesome

toggle-text

Build Status

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.

Install

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.

Usage

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.

Tests

Open test/client.html in your browser.

Contributing

Code

  1. Fork the repo
  2. Run the tests suite to ensure all tests pass before you change any code
  3. Create a new branch
  4. If you’re fixing a bug, add a test which shows the bug
  5. Write your code
  6. Run the tests suite
  7. Open a pull-request

Bug reports

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!