Results 1 to 3 of 3

Thread: Animated Collapsible DIV HELP

  1. #1
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV HELP

    1) Script Title: Animated Collapsible DIV

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem: First of all thank you to DD for having such an excellent website with such a source for information.

    I use this script to run my entire website. However I would like to be able to have one DIV close whenever another DIV is opened. As of now I think my visitors are getting lost in having to close so many DIVs.

    I am not sure of the name of the script and I might have titled this with the wrong one. Below is a sample of the code which hopefully someone has seen before.

    <script type="text/javascript">
    $(document).ready(function() {
    $(".flip22").click(function() {
    $(".panel22").slideToggle("slow");
    });
    });
    </script>

    <style type="text/css">
    div.panel22, p.flip22
    {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background: #303030;
    border: solid 0px #c3c3c3;
    }
    div.panel22
    {
    display: none;
    }
    </style>

    <div class="panel"><div> Used to hide panel

    <div class="flip"></div> Used to open panel

    This is an excellent script but I do not have a clue how to modify it.

    Thank you for you help.
    Last edited by ApartmentPostings; 05-15-2012 at 05:35 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can get all the DIVs to close except the one you're expanding by grouping them together when initializing the script, for example:
    Code:
    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
    Notice the code in red above- to group certain DIVs together so only one is expanded and the rest contracted during user interaction, give each of the DIVs a common group name, such as group=pet or group=mycontent etc.

    On the DD demo page, this is shown in Demo #4, 5, and 6.
    DD Admin

  3. #3
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Open Close Div

    Dear ddadmin,

    Wow, that was easy and yes, it was in front of me all this time. Thank you very much for your help. This is great, I'm going to make the changes today. This has been something that has bothered me for a lone time.

    Thanks again.

    DD is great!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •