https://github.com/bfontaine/toggle-text
Quick library to make togglable text
https://github.com/bfontaine/toggle-text
js library text
Last synced: over 1 year ago
JSON representation
Quick library to make togglable text
- Host: GitHub
- URL: https://github.com/bfontaine/toggle-text
- Owner: bfontaine
- License: mit
- Created: 2014-04-03T09:43:12.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-03-24T19:52:28.000Z (over 11 years ago)
- Last Synced: 2025-03-23T23:43:42.217Z (over 1 year ago)
- Topics: js, library, text
- Language: JavaScript
- Size: 163 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# toggle-text
[](https://travis-ci.org/bfontaine/toggle-text)
`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`][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 `` element.
[js]: https://raw.githubusercontent.com/bfontaine/toggle-text/master/toggle-text.js
## 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:
```html
```
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][help-fork]
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][help-pr]
[help-fork]: https://help.github.com/articles/fork-a-repo
[help-pr]: https://help.github.com/articles/creating-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][help-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!
[help-issue]: https://github.com/bfontaine/toggle-text/issues/new