Results 1 to 3 of 3

Thread: Animated Collapsible DIV Collapse[] not working

  1. #1
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV Collapse[] not working

    1) Script Title: Animated Collapsible DIV

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

    3) Describe problem: On my site I am trying to only expand a div when a button says On. So I am using rel="collapse[mydiv]" whenever the button says Off, but it isn't working. Please view http://driftek.com/customersites/welspun/beta/createabed.php . If you click the On/Off button on the Accent Pillow it should expand when it is turned on and collapse when turned off. I have even card coded rel="collapse[mydiv]" to see if I can get it to always stay collapsed and it doesn't work.

    Please advise

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    using the DD example with new function call in red

    Code:
    <p><b>Example 1 (individual):</b></p>
    <div style="height:50px;background-Color:red;" >
    <a href="javascript:animatedcollapse.toggle('jason');Toggle('b1','On','Off');"><img src="http://www.dynamicdrive.com/dynamicindex17/toggle.jpg" border="0" /></a>
    <div id="b1" >On</div>
    </div>
    <div id="jason" style="width: 300px; background: #FFFFCC; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    the new function

    Code:
    function Toggle(id,a,b){
     var obj=document.getElementById(id);
     if (obj){
      obj.innerHTML=obj.innerHTML==a?b:a;
     }
    }
    
    better with no additional function use the script function

    Code:
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
     var obj=document.getElementById('b1');
     if (divobj.id=='jason'&&obj){
      obj.innerHTML=state=='block'?'Off':'On';
    
     }
    and the HTML

    <p><b>Example 1 (individual):</b></p>
    <div style="height:50px;background-Color:red;" >
    <a href="javascript:animatedcollapse.toggle('jason');"><img src="http://www.dynamicdrive.com/dynamicindex17/toggle.jpg" border="0" /></a>
    <div id="b1" >On</div>
    </div>
    <div id="jason" style="width: 300px; background: #FFFFCC; display:none">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>


    Last edited by vwphillips; 01-15-2014 at 12:15 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hmm. I can see how this might work except my div name is dynamic. Is there anyway to prevent the Animate Div event from triggering? Or to get this to work with a dynamically created divs?

    Problem solved. I layered another div on top of the collapsible div so clicking the image wouldn't trigger the accordion effect.
    Last edited by driftek; 01-16-2014 at 09:10 PM.

Similar Threads

  1. Animated Collapsible DIV v2.4 jumping on expand and collapse
    By Skinnybobb in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 02-22-2010, 11:41 AM
  2. Animated Collapsible DIV - click anywhere else and collapse all
    By newyorker2 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 08-01-2008, 05:08 AM
  3. Animated Collapsible DIV - no full collapse
    By ph34rl3ss in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-14-2007, 11:57 AM
  4. Animated Collapsible DIV (collapse previous?)
    By matt blank in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 09-07-2007, 12:33 PM

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
  •