The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Expanding and Collapsing Accordion Script?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #29701

    Hi everyone,

    For the life of me I can’t find a good accordion-style script for revealing and hiding information. I’m hoping the image below can accurately illustrate the kind of thing I’m looking to accomplish.

    The image is a before and after screenshot. When the user clicks on the "Expand" button in the first image (or on anywhere on that banner dark green/blue banner), I would like the content of that full-width banner to extend and push (scroll) all of the content below it down to make room.

    Then in the after screenshot there is a "Close" button that I would like to collapse that banner to it’s original state, and all of the information below it will scroll back up into view.

    I’m very competent in the HTML and CSS involved in making this happen, but I’m having a hard time finding some javascript designed to do this. Any help?


    I’ve created an example below which you can use.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    #box{background: red; height: 100px; width: 100%; position: relative;}
    #button, #button-active{position: absolute; bottom: 0; right: 0;}
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
    // Begin function
    jQuery.fn.headerToggle = function(target, minHeight, maxHeight) {
    $(target).animate({height: maxHeight});
    $(target).animate({height: minHeight});
    // End function

    $(document).ready(function() {
    $("#button").headerToggle("#box", "100px", "300px");
    <div id="box">
    <a href="#" id="button">Expand</a>

    So it’s

    $("#example").headerToggle(target, minHeight, maxHeight);

    Thank you! This is exactly what I was looking for.

    Unfortunately I’m getting an undesired affect when try to fill it with content. The content in the div#box doesn’t stay inside when it’s collapsed.

    I added overflow:hidden; to #box and that seemed to take care of the problem.


    Above very good description as well as nice examples are given by user. I tried so many times by myself to expand and collapse row or column in HTML to use in my online shopping project. I was took help of e books and guides from Google and, I like above examples and very vast description of HTML controls.


    Hi again,

    I’ve almost finished implementing this script into my site.

    However, the script currently uses plain text as the toggle for the animation. How can I change it so that instead of swapping in the text "Expand" and "Collapse" whenever the link is clicked, it swaps the class of the element instead?


    I’ve actually added that into the script.

    When it is clicked, a class of "active" is added.

    If you would like to remove the text changes. Remove:
    ".text("Collapse")" and ".text("Expand")" from the javascript


    Thanks! I’m a bit slow, I should have seen that. :lol:

    I’ve run into a problem though. I think the script is clashing with a lightbox script I have running.

    Here’s the accordion script running just fine on one page.

    Here’s the same script running on a page that also uses a lightbox script. Both scripts are broken on this page. Remove one or the other fixes the opposite one. You’ll notice that the accordion expands but doesn’t collapse, and the image of the projector loads a new page instead of a lightbox popup.

    Here are the scripts that are running for the light box.

    Any idea where the problem is?


    I really don’t suggest loading more than one javascript library at the same time. If you would like to use lightbox, try the jQuery version instead.

    That way you will avoid javascript conflicts.


    All fixed! Thanks!


    In a very good description, and fine examples are given of user.However, the script is currently using the plain text as switches to animation. Here the same script that runs on a page that also uses a lightbox script.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.