Forums

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
    Posts
  • August 9, 2010 at 10:59 am #29701
    jimmykup
    Participant

    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 #81250
    jamygolden
    Member

    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 #81296
    jimmykup
    Participant

    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 #81331
    oliviathn
    Member

    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 #81359
    jimmykup
    Participant

    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 #81452
    jamygolden
    Member

    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 #81487
    jimmykup
    Participant

    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.

    Quote:
    <script type="text/javascript" src="http://www.iavi.com/js/lightbox/prototype.js"></script&gt;
    <script type="text/javascript" src="http://www.iavi.com/js/lightbox/scriptaculous.js?load=effects"></script&gt;
    <script type="text/javascript" src="http://www.iavi.com/js/lightbox/lightbox.js"></script&gt;

    Any idea where the problem is?

    August 14, 2010 at 4:38 pm #81559
    jamygolden
    Member

    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 #81630
    jimmykup
    Participant

    All fixed! Thanks!

    August 17, 2010 at 10:54 pm #81658
    jonnyj99
    Member

    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.

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