Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 bacuase it visually does exactly what i need, however there is one little problem i cant solve.

    I copied the div and now have 2 collapsible 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 don't 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
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Sounds like a css problem to me. What I don't get is, if you're already loading jQuery, why not just use the toggle function?

    Code:
    <!DOCTYPE html>
    <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <style type="text/css">
    #sectionnav,#searchnav{
    width:50%;
    float:left}
    </style>
    </head>
    <body>
    <div id="mobile_navigation">
    <div id="sectionnav">
    <a href="#" id="dogtoggle" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a> 
    <div id="dog" class="sliders">
    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="#" id="cattoggle" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a> 
    
    <div id="cat" class="sliders">
    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>
    <script type="text/javascript">
    $(document).ready(function(){
       $(".sliders").hide();
    function setSliders(target,toSlide,speed){
       $(target).click(function () {
       $(toSlide).toggle(speed);
    	}); 
    }
    setSliders('#dogtoggle','#dog',2000);
    setSliders('#cattoggle','#cat',300);
    });
    </script>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats the bit i need a bit of help with, thank mate for your reply

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is now solved it was a width issue in the CSS, thank you.


  •  

    LinkBacks (?)


    Posting Permissions

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