https://github.com/stamat/jquery.expandable

Simple jQuery plugin for creating expandable content fields
https://github.com/stamat/jquery.expandable

accordion accordion-plugin collapse expandable jquery jquery-plugin

Last synced: 11 months ago
JSON representation

Simple jQuery plugin for creating expandable content fields

• Host: GitHub
• URL: https://github.com/stamat/jquery.expandable
• Owner: stamat
• License: mit
• Created: 2019-07-28T22:36:38.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-08T16:02:24.000Z (over 6 years ago)
• Last Synced: 2025-04-08T01:03:20.324Z (about 1 year ago)
• Topics: accordion, accordion-plugin, collapse, expandable, jquery, jquery-plugin
• Language: JavaScript
• Size: 8.79 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# jquery.expandable

Simple jQuery plugin that creates expandable / collapsable content, fully responsive of course.

Just target an element `$('.your-expandable-element').expandable();` and you are set out of the box.

Add some styles to it and ta f**king da!

Never again will you have to write this trivial code. (For the duration of my career, till now, about 12 years, I've been writing this code every time from point zero... Retarded? My mom always said I was special...)

[DEMO HERE ⤻](http://stamat.github.io/jquery.expandable)

## Options

* **height** (int) [default: 200]               - set the height of the expandable element, if targeted content height is larger everything below this value will be hidden and "show more" button will appear. This code hooks onto window resize event so it will be responsively calculated.

* **offset** (int) [default: 0]                 - if you don't want expandable functionality on 1px of content exceeding the set *height* you can give it a bit more breathing space via this value.

* **expand_responsive** (int) [default: 0]      - if you want to remove the expandable functionality on mobile, you can set this field with the width threshold for mobile, for instance: 960

* **no_less** (bool) [default: false]           - if you set this to true, after clicking "show more", expand button will disappear preventing the user to collapse the content back. This will also unbind the element from responsive events.

* **animation_duration** (int) [default: 250]   - expandable content has automatically set transition of 250ms for the fanciness sake. If you override this transition please be sure to update this field accordingly for the code to function as intended.

* **more** (str) [default: "Show more"]         - show more message

* **less** (str) [default: "Show less"]         - show less message

Options are passed as a JSON object, the same way you would do with other plugins.

#### Example:

```

    $('.your-expandable-element').expandable({

        height: 300,

        offset: 10,

        expand_responsive: 960,

        no_less: true,

        more: "MOAR!"

    });

```

THE END.