PDA

View Full Version : Animated Collapsible DIV - using different images for toggles.



newyorker2
06-17-2008, 08:21 PM
) Script Title: Animated Collapsible DIV v2.01

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:


I am using images for the toggles. Just like you did in your example. http://www.dynamicdrive.com/dynamicindex17/toggle.jpg

My question I want to be able change the image when it is clicked on.
So whichever menu is expanded it's toggle image will be different color.

in other words I want to use toggle_on.gif when it is clicked and expanded.




thank you for your time and help

rangana
06-18-2008, 12:47 AM
See if adding an onclick event handler on your image helps:


<img src="toggle.jpg" border="0" onclick="this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.jpg':'toggle_on.jpg';" />


Replace the value of highlighted in red for whatever div you want to reference with.

Hope it helps.

Nile
06-18-2008, 01:08 AM
You also need your toggle_off.jpg, and toggle_on.jpg. But I think that you want .gif, so do this(just a slight modifacation):


<img src="toggle.jpg" border="0" onclick="this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.gif':'toggle_on.gif';" />

Just if you couldn't figure it out. ;)

newyorker2
06-18-2008, 01:37 PM
thank you all. let me give it a try

newyorker2
06-18-2008, 01:58 PM
See if adding an onclick event handler on your image helps:


<img src="toggle.jpg" border="0" onclick="this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.jpg':'toggle_on.jpg';" />


Replace the value of highlighted in red for whatever div you want to reference with.

Hope it helps.

it works for the first time, but when i want to toggle a few times it stops working.

basically what i want is if i hit jason div, image with arrow down shows up, if i hit kelly div it's toggle arrow down image shows up, and jason toggle image gets back to original up state.

the code you wrote works for the first time, but if i want to toggle a few times it stops working.

newyorker2
06-18-2008, 06:49 PM
any other ideas?

rangana
06-19-2008, 12:31 AM
Add the highlighted:


"imgreset();this.src=(document.getElementById('jason').style.display!='none')?'toggle_off.jpg':'toggle_on.jpg';"


...and have this:


<script type="text/javascript">
function imgreset()
{
var defimg='toggle_on.jpg', // Default image.
imgs=document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++)
{imgs[i].src=defimg;}}</script>


Hope it helps.

newyorker2
06-19-2008, 01:57 PM
Add the highlighted:



rangana thank you for your help,

i think this will work but when i toggle it replaces ALL of the other images on the page as well.

any ideas?

newyorker2
06-19-2008, 02:20 PM
this is what i created after seeing your code.


<script type="text/javascript">
function imgreset1()
{
var defimg='../images/btn_toggle1.gif', // Default image.
imgs=document.getElementById('quote');
for(var i=0;i<imgs.length;i++)
{imgs[i].src=defimg;}}
</script>
<script type="text/javascript">
function imgreset2()
{
var defimg='../images/btn_toggle2.gif', // Default image.
imgs=document.getElementById('agent');
for(var i=0;i<imgs.length;i++)
{imgs[i].src=defimg;}}
</script>


<a href="javascript:animatedcollapse.toggle('drop1');"><img id="quote" src="../images/btn_toggle1.gif" border="0" onclick="imgreset1();this.src=(document.getElementById('drop1').style.display!='none')?'../images/btn_toggle1.gif':'../images/btn_toggle1_on.gif';" /></a><a href="javascript:animatedcollapse.toggle('drop2');"><img id="agent" src="../images/btn_toggle2.gif" border="0" onclick="imgreset2();this.src=(document.getElementById('drop2').style.display!='none')?'../images/btn_toggle2.gif':'../images/btn_toggle2_on.gif';" /></a>





it works almost like how i wanted. with one problem.

if i click on toggle1, toggle2 image doesn't go back to original state.

rangana
06-20-2008, 12:20 AM
rangana thank you for your help,

i think this will work but when i toggle it replaces ALL of the other images on the page as well.

any ideas?

Because I was referring to all the images using this loop:


imgs=document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++)
{imgs[i].src=defimg;}}</script>


The fix is to surround all of the images you want to be affected with an element.
Let's take for instance div, and give it an id let's take for instance, myid.

Then, add the highlighted in the script:


imgs=document.getElementById('myid').document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++)
{imgs[i].src=defimg;}}</script>


Your post#9 is confusing, maybe because I haven't replied on post#8. Anyway, if problem still exist, get back.
Hope it helps.

starmatt
11-07-2008, 01:42 AM
Did this ever work? I'd like to see the final code. I've tried sorting it out, but it doesn't want to work (I can't get it to toggle the image at all). Do you have to use CSS to set the default display or use the 'hide=1' in the presets?