DivGrow jQuery Plugin – Easily make your DIV containers expandable & collapsable (with animation)

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 DIV

 

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 the latest release from the jQuery Plugin Page

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.

  • http://mybusinessmarketing.org/ Nemko Online Marketing Brainstorm

    This is perfect EXACTLY what I need. How the heck do I install it on a wordpress.org site? PLease help i’ve been looking for a solution for 2 days!!

    • shibbard

      I’m afraid I am only familiar with the free and basic use of WP. I will see if I can take a look.

  • http://altamiraweb.es Posicionamiento

    Does it work on a Wp blog?

  • Burnside

    Hi,

    You to make your script work with more than one div in the same page???

    I make a while for the function but the first div open then close directly, but the second work perfectly.

    regard’s
    burnside.

    • shibbard

      You shouldnt need a while loop.

      Just apply it to a class instead of an ID.

      $().ready(function() {
      $(‘div.grow’).divgrow({ initialHeight: 155 });
      });

      html:

      content
      other content
      • Burnside

        Here is my code :

        $().ready(function() {
        $(‘div.list).divgrow({ initialHeight: 120});
        });

        the content of my mysql query

        the content of my mysql query

        Regards
        Burnside.

        Ps: if you can send me an example who’s working , it would be great.

  • Burnside

    Here is my code :

    $().ready(function() {
    $(‘div.list).divgrow({ initialHeight: 120});
    });

    the content of my mysql query

    the content of my mysql query


    Regards
    Burnside.

    Ps: if you can send me an example who’s working , it would be great.

    • shibbard

      $().ready(function() {
      $(‘div.list).divgrow({ initialHeight: 120});
      });

      You are missing a ‘

      $().ready(function() {
      $(‘div.list’).divgrow({ initialHeight: 120});
      });

      I’ll update the demo page to show it working with more than one div. I have it working on a site but the site is not launched yet.

    • shibbard

      Heres the demo:

      you can see there are multiple divs.

      http://simon.tpdserver2.co.uk/jquery/divgrowdemo.htm

      • Burnside

        Re,

        I have found the problem, it come with the jquery.
        I used 1.3.2 and your script need 1.4.2.

        Sorry for the question.

        Burnside.

    • shibbard

      Ah good, no problem, I will make it clearer that 1.4.2 is required. Thanks for the feedback.

  • shibbard

    Plugin has been updated, see the latest version on jQuery -> http://plugins.jquery.com/project/divgrow

    Its used on this site -> http://www.wasdell.co.uk/services.aspx

  • http://thinkingmachinesinc.com bcarter27

    http://030b665.netsolhost.com/curriculum.html

    Have a look at the above site. I have multiple divs with your plugin, but there is an issue with shrinking the divs. v1.0.3 was causing the div to bounce after shrinking. v1.0.4 has corrected that, but the div shrinks to the wrong value.

    The initial heights on these divs are set to different values. It looks like the script is only keeping the initial hieght value from the last div that is loaded on the page.

    Any suggestions?

    • shibbard

      Hi,

      You are right there is some conflicts with settings overriding.

      I have put a fix in and released it here: http://plugins.jquery.com/content/divgrow-110

      I hope this resolves it. Thanks for taking the time to highlight the problem.

      Simon

      • http://thinkingmachinesinc.com bcarter27

        Wow! Thank you for your quick response.

        Unfortunately, the new version does not seem to have solved the problem. It is still holding onto the last value for Initial Height.

        Have a look at the same URL.

        And thanks again for your help!

      • shibbard

        Hi, sorry you are right I put a fix in a bit hastily, I have corrected the release and put it up.

        Let me know how you get on with it.

        http://plugins.jquery.com/content/divgrow-120

        Simon

  • http://thinkingmachinesinc.com bcarter27

    1.2 seems to have broken something. Maybe you could take a look at the URL with Firebug?

    Is it because my divs have two classes- one for formatting, one to identify which container for divgrow to modify? Can divgrow use id’s instead?

    I have reverted to v.1.1 right now.

    • shibbard

      Strange I am using it without problem in the same way.

      Can you put 1.2 back so I can see what effect it is having?

      • shibbard

        Hi – I think I may have found the issue to do with non-unique id’s being used inside the plugin. I have restructured it internally to be more robust when dealing with multiple instances of it.

        I have tested it by attaching to classes, object id’s of all sorts and it seems to function properly.

        http://plugins.jquery.com/content/divgrow-121

        Hopefully this will solve the issues you are having, please let me know.

  • http://thinkingmachinesinc.com Brandon Carter

    Thanks again for working with me on this…

    1.2.1 seems to have fixed the height issue, but the new unique id seems to have caused some CSS issue with my particular situation.

    I need to mod the script in my implementation so that the adjust class is “readmore” instead of “adjust”. “readmore” has some particular CSS that I need.

    Can you check to see if I have done so properly?

    I have reverted back to jquery.divgrow-1.1.0.custom.js but you can use Firebug to change the page to use jquery.divgrow-1.2.1.custom.js instead. Both are on the server in the js folder.

    Thanks again.

  • shibbard

    Hi glad that sorted it.

    I changed the class of the link button to be “divgrow-adjust” to avoid potential conflicts with users own classes which may be called ajust (you never know).

    Can you not simply apply the same style you use for “readmore” to the class “divgrow-adjust”? This would be the easiest solution.

    I see you have changed some of the JS but it is not quite right, where you have “divgrow-readmore” that will need to be just “readmore”.

  • shibbard

    I have just released a newer version to make the ‘showmore’ and ‘showless’ classes more obvious.

    http://plugins.jquery.com/content/divgrow-122

    Just apply whatever styles you want to the classes: “divgrow-showmore” and “divgrow-showless”.

    As I have done here -> http://www.wasdell.co.uk/services.aspx

    Hope it helps.

    Simon.

  • http://www.w3gmedia.com gold coast web design

    Thank’s mate very useful article

  • http://thinkingmachinesinc.com bcarter27

    The latest version did the trick! I had some late-night typos in my code too. THANKS!

    • shibbard

      Great, works well on your page, looking good. Good luck with the rest 🙂

  • http://www.m-o-p-s.nl cool_s

    I’m helping a friend with this code… so I’ve got a question.

    Is it possible to set the height to ‘auto’, so it will resize the content to the height defined by the content?

    Also… localhost links won’t work for the rest of us 😉

    • shibbard

      Hi there,

      You got me thinking, so I have just made a new release which removes the need for setting the final height.

      I couldnt use auto – as that relies on all parent containers having height set to 100% and not everyone does this. But it seems since a few releases ago the jquery height function works properly – so I was able to use it 🙂

      You can grab it here -> http://plugins.jquery.com/content/divgrow-130

      Also you can now specifiy whether or not to show the brackets (“[..]”).

      Thanks very much for the feedback.

      Oops to the localhost reference, its not the first time 😉

  • Pingback: jQuery divGrow plugin updated – 1.3.0 « HibboBlog

  • http://www.m-o-p-s.nl cool_s

    oh nice ^^

    I gave him the link to the new version…
    I also made a workaround on the hight issue by using the following code:

    $(document).ready(function() {
    $(‘div.content_box’).each(function () {
    var current = $(this);
    current.attr(“rel”, current.height());
    });

    $(‘div.content_box’).divgrow({ initialHeight: 150 });
    });

    which simply adds the height to all the div’s as the rel attribute…

    Also… good timing on the brackets option…
    Makes it a little easier to show them or not.
    Plus, people don’t have to edit your code for it (like I did XD)

    well… thanks for the update ^^

    • shibbard

      Nice work 🙂

      Good thing with the new release is that the rel attribute on div’s did not pass W3C validation.

      The new version without them will ^^

  • http://www.m-o-p-s.nl cool_s

    Continued experimentation on the new release!

    Replaced the .text() with .html() on the link, so you can use images in the text ^^

    http://server.m-o-p-s.nl/DivGrow

    But on the other hand… it would also be possible to create a class for both the states the link could be in… and use CSS for the style (duhh)

    *continues experiments*

    • shibbard

      Thats a neat idea.

      I’ll pull that into the next release 🙂

  • Pingback: jQuery divGrow v1.3.0 in use on www.itzyogi.com « HibboBlog

  • http://www.hexato.com.br Helder Satin

    Hello, first of all congratulations for the great work done there! Awesome script.

    I wanted to ask you one thing, i’m trying to use it but i want to put the button for More Text inside the div i wanna shrink/enlarge.

    I took a look at your code but i couldn’t find a way to solve this problem, is there any way to make it work this way?

    • shibbard

      Hi Helder,
      I am not sure I quite follow you. If the more button is inside the collapsed div, then how will the user click on it?

      Simon.

      • http://www.hexato.com.br Helder Satin

        The button will be in the visible area of the div, in my case, the top right corner.

        What i want to achieve is:

        Div1 is a retangle that contains 3 other divs placed side by side.
        The button will be on div4 and will act over div3 (central one) where i’ll have my content.
        Div1 should also be sized according to div3.

        hope it’s not too confusing!

  • http://www.hexato.com.br Helder Satin
  • http://www.hexato.com.br Helder Satin

    The weird thing is that the div is expanding only 10px more than the initial size, it’s not expanding to fit the text…

    • http://www.hexato.com.br Helder Satin

      Forget it, my css was messed up, fixed it and it’s working perfectly! Thanks a bunch for your awesome work in this plugin!

      • shibbard

        Great Helder, glad you got it working as you needed 🙂

  • Andy

    Great plugin!

    I’m wondering if it’s possible to use only images instead of text to show/hide the divs?

    I tried styling the .divgrow-showmore and it works if I have text defined for the moreText but if I leave the moreText blank or remove it the .divgrow-showmore doesn’t show.

    Am I doing something wrong?
    Thanks

    • shibbard

      Hey,

      This is something Cool_s suggested previously but I had not got around to making a new release (busy times).

      Anyway I have now done that – try the latest release (V1.3.1) and see if that helps.

      http://plugins.jquery.com/content/divgrow-131

      regards,

      Simon.

  • http://www.m-o-p-s.nl cool_s

    That’s quite easy…

    If I’m not mistaken, with the latest release, it is possible to use html tags for the moreText.

  • Pingback: jQuery divGrow v1.3.1 released « HibboBlog

  • Andy

    Yes, now it work great to use an image!
    Thank you so much and Merry Xmas Simon!

  • Anthony

    Love the plugin, works great… but, I was wondering how hard it would be not to show the “show more” text at all, and instead call the function from an image or link in the initial height of the div?

    example:
    http://wbjb.org/bsr/oth/flashplayer/bprtest.php

    I want to be able to click on each of the images to expand the divs. and have no space between said divs.
    Any ideas?

    Thanks.

    • shibbard

      Hi Anthony,

      I see what you mean but will need to think on how it may be implemented into the plugin without adding extra complications (I like to keep the plugins as simple as possible). Or I may be able to give you the code change required instead.

      The only thing is how would the user know to click on the box to expand it?

      regards,

      Simon

  • Olivier3d

    Hi,

    Thanxs for the plug.

    I would like somtimes to start with the div allready expanded and the less text.
    Is there any way to do it ?

    • shibbard

      Hi Olivier,

      I’m afraid this is not a supported feature and would require a fair bit of re-writing to change it. If I get time I will take a look into it.

      regards,

      Simon.

  • http://www.fulton.com merchantroad

    I need to get the height of a div onload so I can have a conditional to either display the showmore or less links depending on if the div content is longer than the initial height.

    The content is dynamic from a db

    Thanks!

    -Jeff Merchant

  • Reza

    Hi, Thanks for the great plug-in.
    In my web page I have a div with dynamic content. Some of them are a couple of lines while the others can be hundreds.

    Is it possible that I can set initial height to for example 400px, but for shorter contents, set it dynamically to the height if content and hide expand/collapse links.

    In other words, I would like to set the initial height dynamically to the minimum of 400px and content height.

    I hope I could explain it well.

    Reza.

  • http://www.m-o-p-s.nl cool_s

    @jeff & Reza

    If you know a little jQuery… take a look at the source from this website: http://www.conoc.nl/en

    I also made some modifications to the 1.3.0 version of the plugin… so you might want to take a look at that file too 😉

    Let me know if it doesn’t work out for you ^^
    Maybe I can help you a little further 😉

    • Reza

      @Cool_s
      Thanks for quick reply.
      The new attribute “moreLessParent” is really helpful. There is an issue though.

      Show more works well, but is you scroll the page and click on “show less” it jumps to the top of the page. I did it in FireFox.

      Thanks again,
      Reza.

      • shibbard

        Hi Reza,

        Looks like Cool_s is helping you out which is good 🙂

        I haven’t had the issue with it jumping to the top of the page myself. Does it still happen if you slow the animation speed down a bit?

        i.e. speed: 5000

  • http://www.m-o-p-s.nl cool_s

    I know…

    I found out in FF that the screen would go white when dealing with a lot of content during the animation.

    However… I’m not actively looking for a solution a.t.m.
    maybe a preventDefault on the click handler might work for you 😉

  • Reza

    @shibbard,
    Slowing down the speed did not help.

    • shibbard

      I presume javascript is having problems animating the content (particularly if there is a lot) and handling the addition/removal of the scroll bar.

      Do you have a link that I can take a look at?

  • Reza

    @cools_s,shibbard
    I commented out this line from cools_s javascript:
    $(‘html’).css(‘overflow’, ‘hidden’);
    (line 78)
    And it solved the issue.

    This line is in the toggle function at the time of collapsing the div.

    Thanks again for you help and great work.

  • http://www.m-o-p-s.nl cool_s

    great that it worked out for you ^^
    can’t wait to see your end result online 😉

    by the way shibbard… maybe you can find something usefull in the code used for this website –> http://www.conoc.nl

  • http://finlawupdates.com Uncle Jesse

    I’m trying to have this work with a WordPress blog located at finlawupdates.com. I’m trying to have the right columns collpase and expand but I cant see to get it to work. Any ideas?

    • shibbard

      Hi,

      I noticed that you have:

      $(‘div.linkcat’).divgrow({ initialHeight: 17 });

      But the actual content is inside an ‘li’ not a ‘div’

      So should work with:
      $(‘li.linkcat’).divgrow({ initialHeight: 17 });
      or
      $(‘.linkcat’).divgrow({ initialHeight: 17 });

      Simon.

      • http://finlawupdates.com Uncle Jesse

        Thanks Simon,

        I tried changing it to li.linkcat and I still can’t get it to work properly.

  • http://finlawupdates.com Uncle Jesse

    Yeah its now $(document). Still nothing though.

    • shibbard

      ok I think there must be some conflict with other jquery stuff on your page.

      Can you try:
      “jQuery(‘li.linkcat’)”
      insteatd of
      “$(‘li.linkcat’)”

  • http://finlawupdates.com Uncle Jesse

    awesome. that was it. I owe you a beer

  • Pingback: jquery divGrow V1.3.2 – minor fixes « HibboBlog

  • Pingback: Your Questions About Slr Camera Bag

  • Pingback: 孕妇可以用的护肤品?孕妇可以用防晒的护肤品吗? | 孕妇护肤品

  • Pingback: 孕妇用什么护肤品?孕期使用哪种护肤品会比较安全? | 孕妇护肤品

  • Pingback: IBM bets big on e-commerce – ITvoir | e-Training Systems for Teaching and Training Online

  • Pingback: Your Questions About Mens Waterproof Jackets

  • http://www.nudawncreative.com Joshua

    Great Plugin!

    I was wondering what would be the most efficient way to reverse the plugin so that it starts at the top then can be reduced down?

    Tanks in advance

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

      Hi Joshua,

      I will take a look at this, maybe add an option to have it start opened rather than collapsed.

      regards,

      Simon.

  • Pingback: Let's Pray for Japan

  • http://www.nudawncreative.com joshua

    How would I control the fullHeight?

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

      Hi Joshua,

      How do you mean?

      I haven’t had a chance to look into reversing the plugin yet.

      The fullheight is simply calculated by the plugin from the element which it is applied to. It then sets the elements starting height to the value passed in.

      Simon.

  • http://www.oseey.com Anonymous

    I’ve learned a lot from your blog here,Keep on going,I will keep an eye on it,One more thing,thanks for your post!welcome to my websites:Function watches

  • Matth

    The link to download is now broken. Can it be downloaded elsewhere?

    • shibbard

      You can get it from here https://github.com/shibbard/jQuery-divGrow/downloads I will have to look at updating this soon

      • Matth

        Thanks so much for the quick reply. The only update I would suggest is to include the documentation from the initial release. Thanks!