Shares

jQuery – Collapser plugin ← jQuery Plugins

- 78,428 views - 212 Comments

Collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a flexible API. It is an all in one plugin with multiple functionalities to truncate a paragraph or any element as desired.

Download Live Demo Fork on Github

Collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a flexible API. It is an all in one plugin with multiple functionalities to truncate a paragraph or any element as desired.

Features

  • Four modes of operation
    • Truncate text by characters
    • Truncate text by words
    • Truncate text by lines
    • Show/hide element
  • HTML content present in the elements are preserved during the operation.
  • Simple and flexible API for using in varied applications.
  • Display remaining string count in the show/hide button.
  • No complicated syntax or alterations required, can be used readily.
  • Light weight only 4KB after minification.
  • Works in all browsers. Tested till IE 7 and it works !

Download

jQuery Collapser source is hosted in Github. Use the link below to download the entire package.

jQuery collapser screenshot

Documentation

Plugin documentation is moved to a seperate page. Documentation page

Donate and Support with PayPal

If you find my products useful, then just donate and support my work. It will be an encouragement !

$
  • http://www.incubox.com Geoff

    This is a great plug-in, thanks. Since I’m not a programmer I have a couple of feature requests: 1) option to set a cookie to remember expand or collapse state, 2) option for default expand or collapse state.

    • http://www.aakashweb.com Aakash Chakravarthy

      The first request will be taken under consideration.
      For the 2nd request, you can make the target element collapsed by hiding it by default.

      i.e You should hide the target element
      eg:

      <div class="bt">Click me to collapse </div>
      <div class="box" style="display:none">This is the collapsing element</div>

      Here the target is already hidden. Hence, this plugin will automatically detect the target elements state. No need any options. Thanks

      If you want to pre-hide a number of elements, then use jQuery like $('.box').hide();

  • http://www.incubox.com Geoff

    This is a great plug-in, thanks. Since I’m not a programmer I have a couple of feature requests: 1) option to set a cookie to remember expand or collapse state, 2) option for default expand or collapse state.

    • http://www.aakashweb.com Aakash Chakravarthy

      The first request will be taken under consideration.
      For the 2nd request, you can make the target element collapsed by hiding it by default.

      i.e You should hide the target element
      eg:

      <div class="bt">Click me to collapse </div>
      <div class="box" style="display:none">This is the collapsing element</div>

      Here the target is already hidden. Hence, this plugin will automatically detect the target elements state. No need any options. Thanks

      If you want to pre-hide a number of elements, then use jQuery like $('.box').hide();

  • http://Website Chris

    Thanks a lot for the plugin!

    Unfortunately I can’t collapse/expand it with onmouseover. How can this be done?? Please help me.. please!

    • http://www.aakashweb.com Aakash Chakravarthy

      Thanks a lot for using my plugin ! Since this the first version, some features are limited.

      The next version will have options to change the click/mouseover/up etc events. Thank you

  • http://www.i-feature.com John

    This is what i’ve been looking for which I couldn’t find in wp plugins.

  • http://www.i-feature.com John

    This is what i’ve been looking for which I couldn’t find in wp plugins.

  • http://Website Michael

    Hi,
    what (if any) are your licensing restrictions on this plugin?
    Thanks.

    • http://www.aakashweb.com Aakash Chakravarthy

      This plugin is released under the MIT License

  • http://www.aakashweb.com Aakash Chakravarthy

    This plugin is released under the MIT License

  • http://www.aakashweb.com Aakash Chakravarthy

    Thanks a lot for using my plugin ! Since this the first version, some features are limited.

    The next version will have options to change the click/mouseover/up etc events. Thank you

  • Pingback: 14 Outstanding jQuery Plugins & Tutorials « The Creative Project

  • Chris

    When is that?? Can’t wait.. it will be so good.

  • Chris

    1) would be a great feature.. but maybe there is a solution without using cookies since lots of people deactivate them.

  • Eserating

    The after collapse callback function return prematurely, as it is being executed before the effect is complete. This is a problem when you need to recalculate the space taken (on not taken) by the collapsed element. I have fixed this by changing the following two methods in the plugin to use the effects callback mechanism:

    function hideElement(obj, method){
    callBeforeCallback(obj);
    if(method == 1){
    obj[options.target](options.targetOnly)[effectHide](
    function(){
    obj.html(expHtml);
    obj.removeClass(options.collapseClass);
    obj.addClass(options.expandClass);
    callAfterCallback(obj);
    });

    }else{
    $(document).find(options.target)[effectHide](
    function(){
    obj.html(expHtml);
    obj.removeClass(options.collapseClass);
    obj.addClass(options.expandClass);
    callAfterCallback(obj);
    });

    }

    }

    function showElement(obj, method){
    callBeforeCallback(obj)
    if(method == 1){
    obj[options.target](options.targetOnly)[effectShow](
    function(){
    obj.html(collHtml);
    obj.removeClass(options.expandClass);
    obj.addClass(options.collapseClass);
    callAfterCallback(obj);
    });

    }else{
    $(document).find(options.target)[effectShow](
    function(){
    obj.html(collHtml);
    obj.removeClass(options.expandClass);
    obj.addClass(options.collapseClass);
    callAfterCallback(obj);
    });

    }

    }

  • http://www.aakashweb.com/ Aakash Chakravarthy

    thank u

  • Talasyn

    Where can I find HTML for demo #8 ?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Heres the code

      <h4 class="demo8">Click here to collapse multiple elements below</h4>
      <span>A &lt;span&gt; element …..</span><br />
      <input type="text" a value="A input box …."/><br />
      <p class="para">A paragraph ….</p>

  • http://www.netais.com Kevin McGee (Netais LLC)

    Hi Aakash,

    I think there are a couple of documentation errors on Collapser’s page. Review the section PLUGIN PROPERTIES and consider these edits:

    1. Effect – the second allowed value s/b ‘fade’ not ‘prev’, correct?
    2. After the Effect section, ‘Target Only’ is incorrectly listed. ‘Target Only’ should appear only once in the properties list, correct?

    Thanks for your plug-ins!

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thank u very much !
      At the time of publishing, i need to write 4 plugin’s documentation. Also, i had no time for document preparation. Anyhow i managed to create a small demo and documentation. This lead me to errors.

      The doc will be corrected soon

  • Helenelarocque

    Hi! There should have something I do not catch up because it still doesn’t work for me. I use it in a joomla web site. I don’t know if there could have conflict but I do not see any in my firebug console. For testing purpose, I used exactly what you have the in your demo page (demo 6 to be more precise). I downloaded the library, I saved it in my project and refer to it in my testing page. I copied the HTML and CSS code… nothing works. Any idea???

  • Kate

    Is there any reason why my little arrow doesn’t show on page display? It only shows after ‘expand’ text has been clicked. I’m calling the arrow through my stylesheet. Preloading the image doesn’t work, either.

    Once I click the ‘expand’ text, the arrow shows but it disappears again if I navigate away from the page and come back.

    Any ideas?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Looks strange, please link the page where you get this error

    • MJ

      Hi Kate,
      I have the same problem. Did you get it resolved? If so, can you please share the solution?
      Thanks,
      MJ

  • Chris

    Dear Aakash,

    like everybody else here I am a big fan of your work! Are you actually planning to release an updated version.. with an option to remember the expand or collapse state?

    It would make your plug-in perfect!

    Best regards,
    Christian

  • Kate

    Hi Aakash

    Thanks for the reply. My website is in development and I cannot publicly release the URL at this time. Is there anyway I can send you the URL?

    Kate

  • mj

    Hi Akash,
    Thanks for the plug-in. I do not get the image when I load the page for the first time. I get the expand arrow only after I click the text first time. How can I load the image when my page is loaded?
    Thanks
    MJ

    • MJ

      I figured it out.
      I had to add expArrow with the class name.
      So the code Expand worked for me.

      • MJ

        ‘<h4 class="demo1 expArrow" ' is the code that worked for me. I lost the code in above post

  • Patrick

    Dear Aakash,

    this plugin is really great. I stopped writing my own navigation due to IE problems. This one works pretty fine. I use the code of your Demo 7. But there is one question to ask:
    Is it possible to have only one item of the same level expanded at once? The navigation tree becomes very large if the user is able to expand more then one item per level. I think it’s best discribed as an accordion effect.

    Greetings from Germany

  • http://twitter.com/angelcreative Sánchez y Sánchez

    save my life!

  • Lelopoulos

    When i am trying to activate your plugin in my wordpress site i am receiving the following message: The plugin does not have a valid header. Could you pls help me

    • http://www.aakashweb.com/ Aakash Chakravarthy

      This is a jquery plugin.. and not a wordpress plugin !

  • http://www.aakashweb.com/ Aakash Chakravarthy

    I saw the page. The problem is you didn’t upload the jquery, jquery collapser files to the scripts directory.

  • Barry

    I have several .js files for greybox loaded in the of the page, although not actually used at present. One of these stopped Collapser (Demo9) from working (namely ../greybox/AJS.js), returning the error “$(document).ready(function() is not a function” (or similar) in the Safari js debug window.
    Changing this “$(document).ready(function()” to:
    jQuery(function() {
    jQuery(‘.demo9′).collapser({
    target: ‘next’,
    targetOnly: ‘p’,
    made Collapser work properly; otherwise only “Collapsertext” in the appears.
    I’ve changed ‘demo9′ and ‘p’ to p classes ‘,expand’ and ‘.extra’ (hidden text), so that they can be styled with css to match the rest of the page, thus:
    (‘.expand’).collapser({
    target: ‘next’,
    targetOnly: ‘.extra’,

    Thanks for this useful plugin.

  • Barry

    Re previous post;
    Shouldn’t have put “gt” & “lt” round the “h4″ in my post! It should read “…otherwise only “Collapsertext” in the h4 line appears.

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms - Noupe Design Blog

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | my computer geek

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | excreters.com

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | Neil Kearney Design

  • http://twitter.com/JorgenGedeon Jörgen Gedeon

    Hi!
    Being a total noob at these things I’d like to use your excellent plugin in my WordPress site. More precisely in the widget section. How would I implement this script into my site?

  • http://twitter.com/JorgenGedeon Jörgen Gedeon

    Hi!
    Being a total noob at these things I’d like to use your excellent plugin in my WordPress site. More precisely in the widget section. How would I implement this script into my site?

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

  • Pingback: [HTML5] 50个有用的jQuery插件 « Cookfl

  • Pingback: Content meets Interface « Family Map

  • Pingback: Coming Together « Family Map

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | Solar Hunter

  • http://www.f4design.com Kevin Z

    I am trying to get this function to happen on page load instead of on the click of Collapse or Expand Paragraph. any ideas on how I can get this to work? So, as soon as the page loads, I want the page to expand. I do not need a way for them to collapse it.

    Thanks!

    Kevin

  • Mail

    Hi and thank you for this great piece of code!
    One question: How can I manage that only one content/collapser is open? I mean that another yet open collapser closes when I open another?

    Thanx for support!

  • Mail

    Hi and thank you for this great piece of code!
    One question: How can I manage that only one content/collapser is open? I mean that another yet open collapser closes when I open another?

    Thanx for support!

    • http://www.aakashweb.com/ Aakash Chakravarthy

      yes it is possible, see the accordion example (demo 6) in this page

      • Mail

        Thank you for your fast support!

        • http://www.aakashweb.com/ Aakash Chakravarthy

          Welcome …

  • maxx

    Can I change the default status from expanded to collapsed?

    • maxx

      sorry,

      for the example with ordered lists (Demo 7)

      • Dtrapp2000

        maxx, I’m using a Demo 7 list and can’t seem to get it to default to a collapsed state for all my list items. Can you clarify where the “style=display:none;” goes? Thank you and excellent plugin.

        • Dtrapp2000

          maxx, sorry for the above post but I figured out to put the “style=display:none” in the tag. It works now. Thank you again.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Hide the target element by default (by adding the attribute style=”display:none”)
      Jquery collapser will automatically find out the default state

      • maxx

        works fine :-)

        Thank you
        maxx

  • sean

    Is there any way to have Next skip over other elements? I have 3 buttons that expand 3 different divs but the buttons must be next to each other in the code before the divs. is there any way to do a next next next command?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      can u please show me a demo ? in jsfiddle.com ? or the direct one ?

  • Youssef

    this plugin is free??

    • http://www.aakashweb.com/ Aakash Chakravarthy

      absolutely !!!

  • Pingback: 50 tane kullanışlı jQuery eklentisi | Yaşarcan Kasal

  • Pingback: 10 jQuery Scripts To Optimize Forms | Devlounge

  • Pingback: 200 AJAX & JavaScript Techniques

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | Woupe Design Blog

  • Christian

    Is there a way to keep the list expanded once I navigate to a new site?

  • Stephen Brust

    Help,
    I am completely clueless on the install proceedure. I tired using the Extension Mgr but got the following error message “Error! Could not find an XML setup file in the package.” Any suggestions?

  • Carlos Gonzalez

    Thanks for the plugin; it works great!

    I work for a large university where certain areas need to use IE7 exclusively {feel my pain}. I created a simple FAQ which hides the answers for each question, which works like a charm except for IE7, where I need it most. Are there any issues regarding IE7?

    Here is the link: http://med.uth.tmc.edu/comm/redesign/dii-secured/residents/frequently-asked-questions.html

    I would appreciate any help you can give. Thanks

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Its not due to jQuery collapser plugin. Its due to the slidenote plugin only.
      In that file (/jquery.slidenote.min.js) look for closeImage:null, and remove the comma at the end ==> closeImage:null

      Similarly do if you see any other occurrence. Inform the source author about the issue. This issue will affect only IE

  • Erik

    The after-collaps callback function seem to be triggered before the collapsed content actually has been shown/hidden; so that the height values for that box is inconsistent and/or unintuitive. In my opinion, if a boxed is closed, and one presses the element that triggers it to become shown, and you look at the height of that element in the callback functions, the ‘before-callback’ should show the height to be 0 or similar, since it’s hidden, and the ‘after-callback’ should show it to be it’s real height; also the ‘after-callback’ should be triggered after the actual box has expanded, not before.

    Is there a reason for the ‘after-callback’ function to be called before the show-box-effect has actually completed and the box has gotten it’s new height?

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | Timesneed.com

  • Mp

    Seems to be a good script but how to install it and where to ad texst and headers
    i cant guess how to get this to work !

    Any help ?

  • Pingback: 50 Useful jQuery Plugins to Enhance your Forms | qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

  • http://twitter.com/DempseyStudio Timothy Dempsey

    Love it but can’t get Demo 9 to work – your HTML skips from 7 to 8 without a sample of what I want – to expand hidden text.

  • http://profiles.google.com/brendan.fernandes Brendan Fernandes

    can this be collapsible be used in joomla modules such as forms.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Yes… of course

  • Fred_parenteau

    Hi there, well I am new to the usage of Jquery and the learning process has started but I still need some help…

    Would some one be able to tell me how to get the Collapser to be collapsed as its first stage!??!

  • http://www.helmcrag.co.uk Vinny Hassell

    Is there any way to have the elements in a collapsed state when a page first loads? They are all currently automatically expanded.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      use style=”display:none” for the element to be hidden

      • http://www.helmcrag.co.uk Vinny Hassell

        Thanks – applied to each LI and works an absolute treat. Superb plugin by the way – great work.

        • http://www.aakashweb.com/ Aakash Chakravarthy

          thanks ….

  • Pingback: 20 jQuery Table Plugins

  • Pingback: 20 jQuery Table Plugins - Welege

  • Dean

    anyway to make demo6 work on ‘hover’ or ‘rollover’ ?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      the current version does not have this feature …. working on it to fix this…

  • Dean

    Does demo6 work on IE7? it seems to be the only browser that doesnt really work…

    • http://www.aakashweb.com/ Aakash Chakravarthy

      strange… it works for me here in IE7

  • http://www.aakashweb.com/ Aakash Chakravarthy

    thanks for using my plugin….. but hover state color means ??? change the color of the link on hover ?? if you want to do that u should use :hover in the element. The second one is not an issue. It works well in IE7 and IE8 (i have those and tested)

  • google adwords

    With Create a very simple accordion using callbacks (Demo 6). How can we put plus/minus icon on this sample. I have try to put them but i got a problem… If we open a box and we keep open another box but don’t click to close current box, it’s mean the current box is closing and open new box but the minus icon still show when the current box closed. How can we show the plus icon when the current box closed?

    My css

            .expIco
            {
                padding-left: 20px;
                background: url(images/plus.gif) no-repeat 0px 4px;
            }
            .collIco
            {
                padding-left: 20px;
                background: url(images/minus.gif) no-repeat 0px 4px;
            }

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Use this code
      $('.panel').hide();

      $('.demo6').collapser({
      target: 'next',
      effect: 'slide',
      changeText: 0,
      expandClass: 'expIco',
      collapseClass: 'collIco'
      }, function(){
      $('.panel').slideUp();
      $('.demo6').removeClass('collIco'); //Newly added $('.demo6').addClass('expIco'); //Newly added
      });

      • Tiago

        I’ve been trying to do the same thing.
        Thank you very much for this and keep up the good work :)

  • kshitij

    Is there a parameter that needs to be passed, to keep the object initially hidden and then show it, on the click of the expand button?

  • Matthew

    Is there anyway to add addition element as accordion headers?  My list can be added to by the user but the new list items do not have listeners.

    Or a destroy function within the collaper to allow me to destroy and re-init?

  • http://pulse.yahoo.com/_IN5OLSRMEQUXWJWLPBZ7YIOEWA Khuffie

    Is there a way to re-initialize or destroy the accordion after it is instantiated? I need to be able to dynamically add new items to an accordion menu, and being able to either destroy it and re-initialize it form scratch, or just re-initialize what was added (so it doesn’t do double triggers) would be great. I can’t seem to find in the code where the ‘listeners’ are being added to trigger collapse and opening of the elements

  • Pingback: 10 jQuery Scripts To Optimize Forms | Add Colours

  • http://www.grdcons.com ENx

    Hi,
    I think I have found a bug. I’m trying to apply your plugin to a two nested element; when the the first one (parent) is collapsed the script does’t check correctly if the child is hidden or not (with the property “display: none”) so it show always the expanHtml. I’ve done some debug and I found where is the problem:
               }else{
                    if($(document).find(options.target).is(‘:hidden’)){
                        $(this).html(expHtml);
                    }else{
                        $(this).html(collHtml);
                    }
                }
    this function: $(document).find(options.target).is(‘:hidden’) returns the wrong value.

    I’ve checked this with jquery 1.6.1 and 1.5.2, but I donn’t have idea on how to solve this problem.

    can you help me please?

    thanks a lot
    ENx

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thanks for the bug report, its is actually .is(“:visible”) Sorry for the bug.

      • http://www.grdcons.com ENx

        Thanks for the fast reply,
        but now there’s the problem when the child element is collapsed: now is always shown the collapseHtml.

        In my case I can have both child element collapsed or not, there’s some solution to this problem?

        Thanks ENx

  • ohope

    Hi there, Aakash. Love the plugin. Just one small query…I’m using demo6 to show different projects in my portfolio. Is there any way that the first slide can be shown instead of a huge blank spot, which I currently have, until the first portfolio piece is selected.

  • Pingback: 20个非常有用的jQuery表格插件 | 贝塔熊 | betabears

  • psilo

    Hi Aakash, thank you for the nice Script. But i have a question. I’m using Demo 6 to show News. In the overview i want to show the first phrase of the news body, on click i want to hide this phrase and show the whole news body. This is ok and works. On clicking second time i want to hide the news body and show the phrase, but this doesn’t work. The body is hiding, but the phrase also. Can you help me please?

    This is the code:

                $(‘.panel’).hide();
                $(‘.demo6′).collapser({
                    target: ‘next’,
                    effect: ‘slide’,
                    changeText: 0,
                    expandClass: ‘expIco’,
                    collapseClass: ‘collIco’
                }, function(){
                    $(‘.panel’).slideUp();
                    $(‘.vorschau’).hide();
                });

    Excuse my bad English.

  • psilo

    Hi Aakash, thank you for the nice Script. But i have a question. I’m using Demo 6 to show News. In the overview i want to show the first phrase of the news body, on click i want to hide this phrase and show the whole news body. This is ok and works. On clicking second time i want to hide the news body and show the phrase, but this doesn’t work. The body is hiding, but the phrase also. Can you help me please?

    This is the code:

                $(‘.panel’).hide();
                $(‘.demo6′).collapser({
                    target: ‘next’,
                    effect: ‘slide’,
                    changeText: 0,
                    expandClass: ‘expIco’,
                    collapseClass: ‘collIco’
                }, function(){
                    $(‘.panel’).slideUp();
                    $(‘.vorschau’).hide();
                });

    Excuse my bad English.

  • psilo

    Hi Aakash, thank you for the nice Script. But i have a question. I’m using Demo 6 to show News. In the overview i want to show the first phrase of the news body, on click i want to hide this phrase and show the whole news body. This is ok and works. On clicking second time i want to hide the news body and show the phrase, but this doesn’t work. The body is hiding, but the phrase also. Can you help me please?

    This is the code:

                $(‘.panel’).hide();
                $(‘.demo6′).collapser({
                    target: ‘next’,
                    effect: ‘slide’,
                    changeText: 0,
                    expandClass: ‘expIco’,
                    collapseClass: ‘collIco’
                }, function(){
                    $(‘.panel’).slideUp();
                    $(‘.vorschau’).hide();
                });

    Excuse my bad English.

  • Anonymous

    Thank you for the script.  I need what I hope to be a simple change.  Can you help out?

    I’m using demo 7 and I need the “collapse list” and “expand list”  to be able to have different titles or text there.  Is there a way to do that?  Changing the link text before the list doesn’t even show up in the list.  I just need to change the text at the beginning of each list to different titles besides having them all say “collapse list” and “expand list”. 

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thanks for your usage, but it will be great if you just give me the url of
      the working site of just a live demo. this will solve the problem easily. !!

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thanks for your usage, but it will be great if you just give me the url of
      the working site of just a live demo. this will solve the problem easily. !!

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thanks for your usage, but it will be great if you just give me the url of
      the working site of just a live demo. this will solve the problem easily. !!

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thanks for your usage, but it will be great if you just give me the url of
      the working site of just a live demo. this will solve the problem easily. !!

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Thanks for your usage, but it will be great if you just give me the url of
      the working site of just a live demo. this will solve the problem easily. !!

      • Anonymous

        It’s not live on my site yet because I can’t get it to work the way I want it, but tonight I’ll post a live demo (which is your demo with less listed items) so you can see.  I just need the area that says “collapse list” to have different text and it’s the same for every new list. 

        • http://www.aakashweb.com/ Aakash Chakravarthy

          You can just use jsfiddle.com to show your demo. It will be useful

          • Anonymous

            So I’ve tried twice to post the link, but an admin must approve it.  I have no idea how long it will take them.  Maybe they just wont let me post a link.  I don’t know.
            This is a test without a link. 

          • Anonymous

            So I’ve tried twice to post the link, but an admin must approve it.  I have no idea how long it will take them.  Maybe they just wont let me post a link.  I don’t know.
            This is a test without a link. 

          • Anonymous

            I’ve tried many ways to post the link and no go.  sorry.  I’ll have to figure it out alone or I may just find another script. 

          • http://www.aakashweb.com/ Aakash Chakravarthy

            Its a very very simple job. What you have to do is just change the property “changeText” = false. thats all.

            I created a demo and you will see the effect you want 
            http://jsfiddle.net/vaakash/fvERp/

            Just see the source and modify. It will be great if you post these queries in the forum so that many can see this.
            Thank you

          • Anonymous

            Which forum?  I’ll post an example of this when I’m finished.  Thank you for your kindness and help. 

          • Anonymous

            Ok, so I got it to work finally.  Is there a way to also have it collapse one topic automatically once I click on another category?

          • http://www.aakashweb.com/ Aakash Chakravarthy

            Do you want a accordion like effect ?

          • Anonymous

            Well, I really like the way it collapses now.  It looks smooth and slides.  I was just wondering if it would work to have all the topics closed and when I click on one it opens (it does this now). But when I chose another topic I would like for the first topic I chose to close automatically.  The way it is now I have to click it again for it to close.  It just involves a lot of clicking the way it is now.  Does that make sense?

          • Anonymous

            Well, I like the effect it has now, but it would be nice for a topic to close once I click on another topic. 

            Either way I like the script.  I will try to post another link although I know it won’t let me.  it’s your demo 7.  I got it working, but for some reason it looks double spaced and yours doesn’t.  What causes that?  Here is the link. 
            http://www.elancejeweler.com/posts/demo7/demo7.html

          • http://www.aakashweb.com/ Aakash Chakravarthy

            For your first condition, try the DEMO 4
            http://www.aakashweb.com/resources/pages/demos/jquery-collapser/
            The double spacing is because there is no styling done on the page. Just use
            it on the main site and apply certain styling work and it will work fine.

          • Anonymous

            Ok, So here is another problem.  It works with a page on it’s own in IE explorer, but when It pops up in my box (using ajax with light box) it won’t work.  Why not?
            Here is the link of the page ajax is calling.  http://www.danaarts.com/DanaArts_FAQ.html
            Check out this experimental page I made just in case I can’t get the light box version to work.  http://www.danaarts.com/FAQ_DanaArts.html
            Just click on the FAQ link to the left and you’ll see it doesn’t work in the pop up, but it does with out the pop up.

            Any ideas as to why?

          • http://www.aakashweb.com/ Aakash Chakravarthy

            When i saw the page, it was working perfectly. i didnt see any problems..

          • Anonymous

            That’s good.  I can’t seem to get it to work on IE 8, but firefox it works just fine.   It does work on the page for me, but not if I click on the left side menu FAQ that has the pop up.  It’s the pop up box that I want the script to work in.

        • http://www.aakashweb.com/ Aakash Chakravarthy

          You can just use jsfiddle.com to show your demo. It will be useful

  • Anonymous

    Is there a way to make it so that the topic headings are closer together.  They seam to be double spaced and I’m assuming it’s because when the list is hidden it leaves one row of space for the list.  If so then how do I have each list collapse so that each topic is right next to each other so all the topics look single spaced when they are all collapsed.  I hope that made sense. 

    I just looked at your demo you posted and it looks right, but when I do it, it has a double space look to it. I’ll keep working on it and see if I can solve it.

  • Jayee Amavasya

    How to predetermine whether element is collapsed or expanded? can any one please let me know…

    • http://www.aakashweb.com/ Aakash Chakravarthy

      I think you can use the beforeCallback option for your usage. See the demo
      “with callbacks” for a example. It will help you.

  • Seb-f

    Thank you for this useful plugin :) . I wonder how to close all the lists when the page loads.
    Is there an attribute to set on the function .collapser ?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Just add style=”display:none” to the elements which you want to hide by
      default.

      • Seb-f

        Thank you very much Aakash :)

  • Murray

    I just tried to install the current download into joomla 1.5 install and get the following error message. “Could not find an XML setup file in the package” Any idea if the zip is corrupted or what I should do. This plugin looks perfect for my needs.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      This jquery collapser is a jQuery plugin and not a Joomla extension. You should use this plugin along with jQuery only. Try this page: http://plugins.jquery.com/

  • http://www.aakashweb.com/ Aakash Chakravarthy

    I think so, you used the code wrongly. You should use
    $(element).collapser({
    next: ‘tr’,
    effect: ‘fade’
    });

    If you have trouble doing this, please report it here again

  • ljc

    Hi…sorry, i couldnt figure out the appropriate place in the forum to put this.  Plugin is great. Im using it similar to demo 7 for lists. 2 questions. First should be simple, but how can i set it to start out with the top level (but not the second level) lists expanded by default?

    Second, im using this for an ecommerce site, and one of the elements in a sublist is choices for sizes, basically jquery radio buttons that need to be postion: absolute to show the image, but not the actual radio button.  Works fine in most browsers, but in IE6/IE7, once that sublist is collapsed and then expanded again, that little section disappears. any thought on how i can keep it there?

    • ljc

      Well, i asked too quickly, because i figured out part 1 by myself, just had to assign an li class and hide it.  part 2 is still stumping me though. :-)

      • ljc

        Well, i got it all worked out…thanks for a great plugin!

        • http://www.aakashweb.com/ Aakash Chakravarthy

          you can check this forum post for more detailed answer … http://www.aakashweb.com/forum/aakash-web-f21/demo-9-html-code-not-available-t310.html

  • md_frg

    Hi, is it possible to also have a visited state?
    We need to show a different style for the collapsed panel, after a user had expanded it.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Hmm… currently it is not possible, but the next version has this feature. It is being developed.

  • Yavlinsky

    Hi to all, is there exists link to latest stable non-zipped jquery.collapser.min.js ? Need for Greasemonkey script. Thanks in advance!

  • 1199 Ani

    sorry for my english…
    I would like to create the accordion demo 6 in horizontal. (heading on top and text down )
    It’s possible ?

  • Kshtjsnghl

    How do it trigger the collapse or expansion of a component(table) through an external event like click of a button?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      You can use the target property of the plugin to target other divs.

      • Kshtjsnghl

        the use case is the following - 
        A div which contains ways to specify the search parameters is already being collapsed and expanded by a meaningful button element above it – much like the demos on your page.
        There is another button which searches on the basis of the parameters and collapses the above mentioned div so as to give more real estate to the user. 
        So, my requirement is to hide the search parameters’s div along with the other things happening in the ‘Search’ button.

  • Jnottoli

    JQuery Collapser question – how to NOT collapse?

    ______________________________________________________________

    Aakash –

     

    I could not find any generated ‘a’ tag for the button, so I
    couldn’t  append your code to it. Also, the button is not code/generated
    code – just an appended style.

     

    Here is what I ended up doing.:

     

                                                   
    $(‘.fixedPositRules2′).collapser({                                                                              

                                                                   
    target: ‘.fixedPositToggle’,

                                                                   
    effect: ‘fade’,

                                                                   
    changeText: 0,

                                                                   
    expandClass: ‘expIco’,

                                                                   
    collapseClass: ‘collIco’

                                                                   

                                                                                   
    //start with placed button, replace with generated button onClick

                                                                                   
    }, function(){

                                                                                   
                   
    $(‘.promoSpacer’).removeClass(‘promoSpacer’).addClass(‘promoSpacerOff’);

                                                                                                   
    $(‘input’).collapser({target: null});

                                                   
    });

     

    -         
    fixedPositRules2: is
    the whole div that contains my form div that will actually open/close (fixedPositToggle)

    -         
    expico and collico: are
    my expand/collapse buttons, which were easier to make into separate buttons
    (instead of a sprite) in this case

    -         
    I have a form with two input fields that I need to click on to
    bring into browser focus. Clicking on them was closing the div (I seem to have
    targeted the entire div – not just a button element). The two links I had ended
    up becoming instructional text – so, no further problem there

    -         
    $(‘.promoSpacer’).removeClass(‘promoSpacer’).addClass(‘promoSpacerOff’);: I
    couldn’t show the initial button onLoad, to save my life. So, I made a span and
    classed it in CSS for the Open button as a background. I removed the “open”
    class (show button) and added the close class (no button). From there, Collapser
    toggled both button states, and my classes were no longer appended, because
    there was no more “promoSpacer”  class to remove.

    -         
    $(‘input’).collapser({target: null});: Now,
    to not close the div when I focus on the inputs…. This line solved that. I
    changed the behavior of Collapser for element type “input.” I can
    actually click anywhere ELSE in the div and toggle it open or closed. But, I
    don’t know if that’s a problem, as most users will probably click the button.

     

    Here is my original post to you:

     

    Aakash –

     

    I’m using your jQuery Collapser.

     

    Thanks for doing it. Good job.

     

    I Do need it to (not) do one thing, though.

     

    I open my Div, which consists of two form inputs and two
    links that describe what the inputs are.

     

    If I click on an input for focus, or a click on one of the
    links, the Div closes – I don’t want that.

     

    Do you have any insights on how I can accomplish  that?

     

    I can use a function at the end, but I don’t know exactly
    what to tell it to do/not do.

     

     

    Thank you,

     

    -         
    Joe N.

  • Jnottoli

    JQuery Collapser question – how to NOT collapse?

    ______________________________________________________________

    Aakash –

     

    I could not find any generated ‘a’ tag for the button, so I
    couldn’t  append your code to it. Also, the button is not code/generated
    code – just an appended style.

     

    Here is what I ended up doing.:

     

                                                   
    $(‘.fixedPositRules2′).collapser({                                                                              

                                                                   
    target: ‘.fixedPositToggle’,

                                                                   
    effect: ‘fade’,

                                                                   
    changeText: 0,

                                                                   
    expandClass: ‘expIco’,

                                                                   
    collapseClass: ‘collIco’

                                                                   

                                                                                   
    //start with placed button, replace with generated button onClick

                                                                                   
    }, function(){

                                                                                   
                   
    $(‘.promoSpacer’).removeClass(‘promoSpacer’).addClass(‘promoSpacerOff’);

                                                                                                   
    $(‘input’).collapser({target: null});

                                                   
    });

     

    -         
    fixedPositRules2: is
    the whole div that contains my form div that will actually open/close (fixedPositToggle)

    -         
    expico and collico: are
    my expand/collapse buttons, which were easier to make into separate buttons
    (instead of a sprite) in this case

    -         
    I have a form with two input fields that I need to click on to
    bring into browser focus. Clicking on them was closing the div (I seem to have
    targeted the entire div – not just a button element). The two links I had ended
    up becoming instructional text – so, no further problem there

    -         
    $(‘.promoSpacer’).removeClass(‘promoSpacer’).addClass(‘promoSpacerOff’);: I
    couldn’t show the initial button onLoad, to save my life. So, I made a span and
    classed it in CSS for the Open button as a background. I removed the “open”
    class (show button) and added the close class (no button). From there, Collapser
    toggled both button states, and my classes were no longer appended, because
    there was no more “promoSpacer”  class to remove.

    -         
    $(‘input’).collapser({target: null});: Now,
    to not close the div when I focus on the inputs…. This line solved that. I
    changed the behavior of Collapser for element type “input.” I can
    actually click anywhere ELSE in the div and toggle it open or closed. But, I
    don’t know if that’s a problem, as most users will probably click the button.

     

    Here is my original post to you:

     

    Aakash –

     

    I’m using your jQuery Collapser.

     

    Thanks for doing it. Good job.

     

    I Do need it to (not) do one thing, though.

     

    I open my Div, which consists of two form inputs and two
    links that describe what the inputs are.

     

    If I click on an input for focus, or a click on one of the
    links, the Div closes – I don’t want that.

     

    Do you have any insights on how I can accomplish  that?

     

    I can use a function at the end, but I don’t know exactly
    what to tell it to do/not do.

     

     

    Thank you,

     

    -         
    Joe N.

  • Pingback: Aakasha web | Farestrans

  • Pingback: FreeDownloadSecrets.com » Extensive Collection Of Useful jQuery Plugins For Working With Tables

  • Chris

    Is there a way to keep the first panel open and leave rest closed?

  • Chris

    Is there a way to keep the first panel open and leave rest closed?

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Use $('.panel:gt(0)').hide();  instead of 
      $('.panel').hide();

  • Antonio G.

    Plugin run only in readme.html with insert your code in
      $.noConflict();
      jQuery(document).ready(function($) {
        … your code here …
      });

    for exclude use of jquery.js.
    Paragraph collapse code do not run in may page baut well in your readme.html page!
    I have run your readme.html and my page run on Google Chrome and already use jquery-1.6.4.js up then jquery-1.4.js and all JS file are in js folder, like jquery download.
    Hai have copy exactly your code in my page but its do not run for collapse paragraph but reload the may page!

  • S G

    Hey Akash -

    Thanks for the great plugin. I have a slight problem that Im hoping you can help fix.

    I have a login/password area that I want to expand/collapse when user
    clicks +-. I am using your demo8 as base. However, once expanded, my
    textbox and password box are collapsing on clicking them instead of
    allowing user to input their text.

    Example – go to (adding spaces to un-url this) test . go4worldbusiness . com/scripts/jquery-ui-1.8.16/development-bundle/demos/dialog/test.asp

    Click Button “Send Inquiry” -> Bottom of the form click on “Members click here …”

  • S G

    Hey Akash -

    Thanks for the great plugin. I have a slight problem that Im hoping you can help fix.

    I have a login/password area that I want to expand/collapse when user
    clicks +-. I am using your demo8 as base. However, once expanded, my
    textbox and password box are collapsing on clicking them instead of
    allowing user to input their text.

    Example – go to (adding spaces to un-url this) test . go4worldbusiness . com/scripts/jquery-ui-1.8.16/development-bundle/demos/dialog/test.asp

    Click Button “Send Inquiry” -> Bottom of the form click on “Members click here …”

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Sorry… i didnt see that “Send Inquiry” button … can you please post a image of the place ?

      • S G

        Thanks. Ive attached an image of the location where you can see my problem.
        When you are at the url, click the “send inquiry” button which should open a dialog. Towards the bottom of the dialog, you should be able to see a +- “Members click here …” which is the expand/collapse area I am talking about.

        • http://www.aakashweb.com/ Aakash Chakravarthy

          I think, you are using another plugin for expand/collapse action ? right ?

          • S G

            Yep. Thats right. I couldnt make yours work.

          • http://www.aakashweb.com/ Aakash Chakravarthy

            anyway… thanks for trying..

            Can u please give the code which you used for collapser previously ?? so that i can find the issue …

  • http://www.aakashweb.com/ Aakash Chakravarthy

    When I clicked the “Members click here …” button, the form appeared and it was static and it didn’t collapse… did you solve the problem by yourself ??

    • S G

      Thanks. I figured it out.

  • S G

    xcvzxcvxczv xcv 

  • Pingback: 28 Useful jQuery Plugins for Working with Tables | 1step web design: Best for developer and designer

  • Naomi

    Hi there :D
    One small question (Im not sure if its already been asked) … How do you change the effects? I am playing around with Demo 6 and would like the panels to slide left to right? I cant seem to change the effect in the plugin.
    Thanks :D

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Hello,

      I think the slide left or right effect cannot be achieved using jQuery collapser, since this plugin is just for collapsing the content up and down. Thank you.

  • http://www.benjaminjamesturner.com/ Ben

    Hi, firstly thank you for all your work.
    I have utilised demo 6 and would like to know if it’s possible to set a fixed length for the expanded panel?
    The panel is loading a feed and I would like it so that it doesn’t expand to reveal the whole feed only a defined length wherby the user must scroll down to view the rest of the content.
    Thanks again.
     

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Simple !! just use the CSS

      .panel{
              height: 200px;    /* Change 200px to any desired value */
              overflow: auto;}

  • Robyn

    Is there any way to default the plugin as CLOSED? Thanks.

    • http://www.aakashweb.com/ Aakash Chakravarthy

      Just add style=”display:none” to the target element.

  • smarty

    GREAT work! Is there any way to open ALL target-elements at the same time?

    • Cerebellium

      Yes. This plug-in lets you target specific classes. I used the code below to make a “Show All/Hide All” button. It toggles all the elements with a “.content” class.

                  $(‘.maintoggle’).collapser({
                      target: ‘.content’,
                      effect: ‘slide’,
                      changeText: true,
                      expandHtml: ‘Show All’,
                      collapseHtml: ‘Hide All’
                  });

  • Cerebellium

    Thanks for the Plug-in!  I think I have found a bug and wanted to comment.

    I have an accordion style list (similar to your Demo 6). In addition to each individual item expanding and collapsing, I also have a “Expand All/Hide All” button that targets all the list items. It works great, but if there are any items in the list that are already open prior to using “Expand All”, the list will collapse instead of expanding all the items.

    Also, is their an easy way of changing the css of the target elements? Each item in my list has an open/closed indicator that is toggled when opened or closed. I would like all indicators to toggle when I use my “Expand All/Hide All” button.

    Thanks!

  • Pingback: 10 jQuery Tabs and Accordion | jQuery4u

  • Pingback: 10 jQuery Tabs and Accordion | jQuery4u

  • Pingback: 10个jQuery的标签页tabs和手风琴效果Accordion实现 » 全信息

  • Pingback: 柯激情的个人主页 » 分享10个jQuery的标签页tabs和手风琴效果Accordion实现

  • Pingback: Share 10 jQuery tab tabs and accordion effect Accordion implementation - Open News

  • Pingback: 分享10个jQuery的标签页tabs和手风琴效果Accordion实现 ‹ 站长巴士

  • Lj0281

    This script is great, but I am running into a problem: If any of the text that is revealed uses unordered lists (), the expand/collapse stops at that instead of including it in the area to be expanded/collapsed.  Is thee a work around for this, or am I doing something wrong?  Otherwise, this is perfect.

    • Lj0281

      FYI, I’m using Demo 2.  Thank you!

  • Pingback: Questions About Jquery Ajax – Top Apprentice Blog

  • Pingback: 80 Powerful (Free) jQuery Plugins to Enrich Your Sites User Experience | Tools | instantShift

  • Pingback: 80 Useful jQuery Plugins to Enrich Your Sites User Experience « Blog de xkortazar

  • Pingback: 80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience | Wordpress Themes

  • Pingback: 80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience | Really Simple Websites

  • Pingback: 80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience | The Art Times

  • http://twitter.com/stooneyoriginal Stooney

    Hi,
    the last comment happened quite some time ago, hope you are still reading this …
    My problem might be rather easy to solve, but I just can’t get the hang of it:
    I am using your script in a Navigation-Panel for showing subpages of a certain item. That part works like a charm.
    Additionally to that I want to open an actual page too and that’s what I can’t seem to work out.
    Either it opens the page but does not slide out the panel or it slides out but nothing else happens.

    This is my code in a nutshell:

    $(‘.panel_leistungen’).hide();

    $(‘.head_leistungen’).collapser({
        target: ‘next’,
        targetOnly: false,
        effect: ‘slide’,
        changeText: 0,
        expandClass: ‘expIco’,
        collapseClass: ‘collIco’
    },

    function()
      {
      $(‘.panel_leistungen’).slideUp();
      }
    );

    So what do I have to add to open a page “leistungen.php” upon click AND slide out the panel as well?
    Thanks for any help!

  • Pingback: 45 پلاگین جی کوئری مفید و رایگان برای سایت شما | Pixran

  • Pingback: 50 Best Jquery Tutorials & Examples for Web designers

  • Pingback: 15 Plugins jQuery para crear tablas increíbles

  • Yuval Greenfield

    I think the callbacks should have been one after collapse and one after expand. But that’s just me.

  • Pingback: 80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience | (Web)Design inspiration

  • CB Designs

    Hey i’m using your collapser plugin on my ecommerce site and now coming up with insecure content… how can I fix this? Thanks for your help in advance.

  • Pingback: 50+ Useful Free jQuery Plugins to Enrich Your Site’s User Experience « Freebies « Creative Cartels A Creative Design & Branding Studio

  • Adam

    Hi, is there a URL parameter string that I can use which can link to a page featuring the collapser plugin and expand it’s containers automatically?
    Thanks!

  • Pingback: 20 jQuery Table Plugins | JqueryHeaven

  • Rob

    Hi Aakash, is there a way to set an action to take place when all elements are collapsed? I have a page that shows short text bios for people when you click on their picture. I use the collapse function for each bio element, but it does not seem to keep the collapse and expand classes that I have assigned to them. Any thoughts? Thanks, your script is very useful!

  • Najib

    Thanks for this great plugin.

    I want to mention that it is not compatible with the new jQuey 1.9. The function toggle is deprecated.

  • Pingback: 80 Plugins úteis jQuery para enriquecer a experiência do usuário do seu site – Site para Empresas – Blog sobre Internet e Criação de Site

  • Pingback: Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience | W3Ccode

  • Pingback: 45 پلاگین جی کوئری مفید و رایگان برای سایت شما

  • Pingback: 45 پلاگین جی کوئری مفید و رایگان برای سایت شما

  • Pingback: Fresh List of Javascript Accordion library

  • Pingback: jQuery Collapser : jQuery plugin for Collapsing an Element Text | backend – webcode masters

  • Pingback: 45 پلاگین جی کوئری مفید و رایگان برای سایت شماشبکه /وب سایت /امنیت | شبکه /وب سایت /امنیت