SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Animated Collapsible DIV v2.4

    Hello

    This is brilliant and good to work with, there is one issue i have if someone can help please.

    I have used example 4 baucase it visually does exactly what i need, however there is one little problem i cant solve.

    I copied the div and now have 2 collapsable divs next to each other, which nearly do exactly what i need.

    I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i dont know how to do that.

    here is the code

    thanks

    the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm

    Code:
    <script type="text/javascript">
    
        animatedcollapse.addDiv('jason', 'fade=1,height=80px')
        animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
        animatedcollapse.addDiv('michael', 'fade=1,height=120px')
    
        animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
        animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
        animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
    
        animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
            //$: Access to jQuery
            //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
            //state: "block" or "none", depending on state
        }
    
        animatedcollapse.init()
    </script>
    
    <div id="mobile_navigation">
    <div id="sectionnav">
    <a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a> 
    <div id="dog">
    The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
    </div>
    </div>
    
    <div id="searchnav">
    <a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a> 
    
    <div id="cat">
    The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
    </div>
    </div> 
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is now solved it was a width issue in the CSS, thank you.


Tags for this Thread

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
  •