Replace Collapsible Div

**carmelaem** · 10-07-2008, 08:03 PM

1) Script Title: Animated Collapsible DIV

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

3) Describe problem: I am trying to create a sliding billboard and was able to use the Animated Collapsible DIV script. Please view http://www.areadevelopment.com/test/...exAdTest1.html. When the user clicks open, image 2 should replace image 1 or hide image 1. Does anyone know how to do that? I am a web designer not a programmer so bear with me.

Thanking you in advance!

**ddadmin** · 10-08-2008, 08:38 PM

You'd simply define the two collapsible images as part of the same group. Please read the "Feature Attributes string" section on the script page. You may end up with something like:

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">

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')

animatedcollapse.init()

</script>

<body>


<a href="javascript:animatedcollapse.toggle('cat')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div id="cat" style="width: 300px; background: #BDF381;">
<img src="http://www.areadevelopment.com/test/expandableadtest/300x270.gif" />
</div>



<p><b>Example 5 (part of group "pets"):</b></p>

<a href="javascript:animatedcollapse.toggle('dog')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>

<div id="dog" style="width: 300px; background: #BDF381;">
<img src="http://www.areadevelopment.com/test/expandableadtest/300x600.gif" />
</div>

**carmelaem** · 10-09-2008, 03:53 PM

Thanks for your help. I find Dynamic Forums to be a great resource.

**ktomasso** · 12-20-2008, 08:58 PM

I've used this method to create a collapsible ad on one of my sites, however the toggle link does not seem to work in ie6.

My code:

HTML Code:

<script type="text/javascript">

animatedcollapse.addDiv('newyearad', 'fade=0,speed=400,group=pets')
animatedcollapse.init()

</script>
</head>

<body>
<div id="frame">
  <div id="outer-container">
    <div id="container">
     
<div id="top-ad">
<a href="javascript:animatedcollapse.toggle('newyearad')">hide/show ad</a> 

<div id="newyearad" style="width: 800px; background: #BDF381;">
<img src="images/newyeartest.jpg" />
</div>
</div>

You can find the page here.

Does anyone know how to fix this issue? Thanks in advance.

Thread: Replace Collapsible Div

Thread Tools

Search Thread

Replace Collapsible Div

Thank you!

Collapsable <div> not working in ie6

Bookmarks

Bookmarks

Posting Permissions