Dynamic Content max Height jQuery Plugin

Demos on the right side.
This plugin creates a button if your content height is above your max height.

How to install

Step 1: Link required files

Step 2: HTML Markup

<div class="dynamic-selector" data-max-height="100" data-less="show less" data-more="show more">
   
       Lorem Ipsum
       
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.       
   
</div>

Step 3: Call the plugin

$(function(){
   $('.dynamic-selector').dynamicContentHeight({
       'moreText': 'show more',
       'lessText': 'show less'
   });
});

Options

You can set global options or use data-attributes

lessText

set default button text for less content

                    default: 'show less'
data-less="show less"

moreText

set default button text for more content

default: 'show more'
data-more="show more"

maxHeight

set default max height if no data-attribute is set

default: 100
data-max-height="100"

btnClass

set your css class for button

default: 'btn btn-default'

selectorClass

set classname for the wrapper

default: '.dynamic-selector'

contentClass

set classname for the content

default: '.dynamic-content'

example

<div class="dynamic-selector">
    
        YOUR CONTENT
    
</div>
$('.dynamic-selector').dynamicContentHeight({
    maxHeight: 300,
    moreText: 'SHOW MORE',
    lessText: 'SHOW LESS'
});

<div class="dynamic-selector" data-max-height="300" data-less="SHOW LESS" data-more="SHOW MORE">
    
        YOUR CONTENT
    
</div>
$('.dynamic-selector').dynamicContentHeight();

Demo 1

This example uses
data-max-height="100",
data-less="SHOWLESS"
data-more"SHOWMORE"

<div class="dynamic-selector" data-max-height="100" data-less="SHOWLESS" data-more="SHOWMORE">
    <div class="dynamic-content">
    Demo 2
        This example uses default plugin options

    </div>
</div>

$('.dynamic-selector').dynamicContentHeight();

Demo 2

This example uses your plugin options

<div class="dynamic-selector">
    <div class="dynamic-content">
  Demo 2
  This example uses your plugin options

    </div>
</div>

                        $('.dynamic-selector').dynamicContentHeight({
    'moreText': 'MOREEEEE',
    'lessText': 'LEEEEEEEEEESS',
    'maxHeight': 150
});

Demo 3

This example uses data-max-height="500"
for this small content we don't need a button

<div class="dynamic-selector" data-max-height="500">
<div class="dynamic-content">
Demo 3

   This example uses data-max-height="400"

   for this small content we don't need a button

</div>
</div>

$('.dynamic-selector').dynamicContentHeight();

Demo 4

This example uses default plugin options

<div class="dynamic-selector">
<div class="dynamic-content">
    Demo 4
    This example uses default plugin options
</div></div>

moreText: 'show more',
lessText: 'show less',
btnClass: 'btn btn-primary',
maxHeight: 100

$('.dynamic-selector').dynamicContentHeight();