Grow your CSS skills. Land your dream job.

Expanding and Collapsing Accordion Script?

  • # August 9, 2010 at 10:59 am

    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.

    http://www.iavi.com/example.jpg

    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?

    # August 10, 2010 at 6:02 am

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

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <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;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    // Begin function
    jQuery.fn.headerToggle = function(target, minHeight, maxHeight) {
    return this.click(function(){
    if(!$(this).hasClass("active")){
    $(target).animate({height: maxHeight});
    $(this).toggleClass("active").text("Collapse");
    }
    else{
    $(target).animate({height: minHeight});
    $(this).toggleClass("active").text("Expand");
    }
    });
    };
    // End function

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

    So it’s

    Code:
    $("#example").headerToggle(target, minHeight, maxHeight);
    # August 10, 2010 at 4:28 pm

    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.

    http://www.iavi.com/csstricks.html

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

    # August 11, 2010 at 2:00 am

    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 w3school.com, I like above examples and very vast description of HTML controls.

    # August 11, 2010 at 11:21 am

    Hi again,

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

    http://www.iavi.com/index_expand.asp

    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?

    # August 12, 2010 at 3:38 pm

    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

    # August 13, 2010 at 12:46 pm

    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.
    http://www.iavi.com/items.asp?Cc=LGLCD

    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.

    http://www.iavi.com/itemdesc.asp?ic=22LD350C

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

    Any idea where the problem is?

    # August 14, 2010 at 4:38 pm

    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.
    http://leandrovieira.com/projects/jquery/lightbox/

    That way you will avoid javascript conflicts.

    # August 16, 2010 at 1:40 pm

    All fixed! Thanks!

    # August 17, 2010 at 10:54 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".