jQuery divGrow

I had the need for a number of divs on a page that would show a certain amount of content, then grow (animate) with a ‘show more’ button, and shrink back with a ‘show less’ button.

There were solutions out there, but the ones I found were based on the number of characters in the text and had issues with certain content inside them such as images or links etc.

I just wanted to use pixel height values. So I wrote a jQuery plugin to do so, you can find it here. It is tiny, the compressed version just 920 bytes (not even 1K!).

The plugin will crop the container div to the initial height value and add a link to the bottom to expand it. When clicked the container wil expand to the actual height of the container and provide a click link to collapse it. The expand and collapse action are animated.

Cropped Div

Expanded

Very simple to use. Just call the function on the jQuery selector for a containing div element and pass its initial size, then for each div container set the rel value of the size you want it to expand to.

If you want divs with different starting heights, just give them different class names and apply the divgrow function for each class with different starting heights.

It is used on this live site – http://www.wasdell.co.uk/services.aspx

and here http://www.itzyogi.com/therapies.aspx

Download -> https://github.com/shibbard/jQuery-divGrow/downloads

Usage:

1) Inlcude the JS file into your page (after jQuery – requires 1.4.2+):

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>

<script src=”JS/jquery.divgrow.min.js” type=”text/javascript”></script>

2) Apply the divgrow function to any div element(s) you want to grow using the usual jQuery selector syntax. initialHeight sets the height of the containers before they are expanded. Here any div of class “more-block” will have this feature applied and the starting height is 147. Use different classes and apply seperatly if you need different starting heights.

$().ready(function() {
$(‘div.more-block’).divgrow({ initialHeight: 147 });
});

3) Create your container with a class or id reference that the plugin was bound to (i.e. “more-block” in this example)

<div class=”more-block”>
<h2>Corns and Callus (Hyperkeratosis)</h2>
<p>
These occur in areas of the foot that are experiencing excess pressure and/or friction. The body seeks to defend itself by producing extra layers of skin as a form of protection. However as the process continues the accumulation of extra skin exceeds that which is lost naturally so the skin in these vulnerable areas builds up and becomes compacted as the original cause of the process continues. The protective mechanism becomes the problem if left untreated and the cause not addressed.<br />
Callus denotes a general area of hard dead skin and a corn is a much more concentrated collection which often goes deep rather than wide. Corns can produce pain completely out of proportion to their size often because of impingement upon nerves or sometimes infection.<br />
Treatment of the symptoms is the first step to stopping the pain and discomfort and this is usually addressed without much discomfort by a foot health professional. Treating the cause can be as simple as discarding an ill fitting pair of shoes or may entail a more detailed assessment of individual foot function.<br />
Callus is not always caused by mechanical factors but can be a symptom of a systemic disease such as Psoriasis.<br />
There are some useful devices to assist in protecting vulnerable areas from corns and callus – see our recommended <a href=”Products.aspx”>products page</a>.
</p>
</div>

—————————————————–

Thats it.

Optional arguments:

initialHeight: 100 – (default)
moreText: “+ Show More” – (default)
lessText: “- Show Less” – (default)
showBrackets: true – (default)

e.g.

$(‘div.more-block’).divgrow({ initialHeight: 147, moreText: “give me more”, lessText: “thats enough”, showBrackets: false });

The zip file includes a how to instruction on use.

  • roman

    strangel this doesn’t work with jquery 1.9.1 – the show more link is not shown (although the brackets are…) – with 1.4.2 this works flawlessly. any clues on what has to be changed in the divGrow js file?

  • http://www.facebook.com/torstenfeld Torsten Feld

    Hi! First, thank you very much for this very nice plugin! I would like to use it for a div which is floating right. Is it possible that the div on the left (which should have the same height) is expanded at the same time with the same size, if ‘show more’ is clicked?
    This would be really awesome!

  • Jose

    Hello Simon,
    Thanks for sharing those nice plugins. I wonder if I have more content, what would be Google behavior, in case someone searched for a word that it is only inside the expanded zone?.

    My concern is to have a web page SEO friendly and content find-ability and visibility.

    By the way I like your forms field handling a lot :)
    Best regards
    Jose

  • Anna

    This is cool!

  • http://www.turnthecornertech.com John

    Hi Simon,

    First off, thanks for this plug-in. it’s exactly what i was looking for. It works really well, although i have an issue that I’m hoping is just a config issue or easy to fix.

    You can see that it works perfectly on this page – http://www.bigappleherp.com/JR-HOME/JR-TEST/Fluval-Profile-Aquarium-Set .

    the issue i have is on this page – http://www.bigappleherp.com/JR-HOME/JR-TEST/Fluval-Profile-Aquarium-Set . The content on this page does not fill the div, thus expanding does not make sense. Ideally, either no expand/collapse text would be displayed or the correct action would be displayed.

    Note: i was able to place buttons by inserting the html for the buttons in the more and less text fields.

    Any help or thoughts would be greatly appreciated. This is the last open issue to bring a new design live.

    Thanks!
    John

    • http://www.tpddesign.co.uk Simon

      Hi John,

      There is no way the plugin can know if the content fills the container or not. This would have to be programmed into the code that calls the plugin to ethier apply the plugin or not. I.E. apply the plugin to a certain class – and have the code add the class to the container only if it should be expanded.

      regards,

      Simon.