Help finding correct javascript for collapsible divs

Hi there,
I am looking for a collapsible div javascript that works so when you click the title, the title image can change when its expanded?
See the image attached (see how the arrows shift to pointing V when you have selected it?)
I hope someone can help me.
Thanks,
A
demo.jpg
LVL 11
Amanda WatsonWeb DeveloperAsked:
Who is Participating?
 
Kishan ZunjareSr. Software EngineerCommented:
HI,

I have attached very good HTML + jQuery sample application for Collapse and Expand..

Hope this will work in your case. CollapseExpand.zip CollapseExpand.zip
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
0
 
Gurvinder Pal SinghCommented:
if you are okay with Jquery then you can use
slideToggle() instead of simple block and none for display style
http://api.jquery.com/slideToggle/
http://www.w3schools.com/jquery/eff_slidetoggle.asp



0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Amanda WatsonWeb DeveloperAuthor Commented:
Hi thanks, yes I have seen this and I have implement others successfully, however what I need specifically is a script that changes the background image when you click on the TITLE

These ones change the background of the text, but you can see with my image I need the title background to change.??
0
 
Gurvinder Pal SinghCommented:
If you want to use that only, then you can use the onToggle event handler

animatedcollapse.ontoggle=function($, divobj, state){
      //$: 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
    if ( state == "block" )
    {
         divobj.style.backgroundImage= "url()";
    }
    else
    {
         divObj.style.background = "none";
    }
}
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Hi again...so can I use that in this script here


// JavaScript Document
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */
if (document.getElementById) {
  document.write('<style type="text/css">.texter {display:none; border-left:white 20px solid; color:#404040; font: .9em verdana, arial, helvetica, sans-serif; margin-bottom: 12px;}</style>') }

  var divNum = new Array("a1","a2","a3");  // at the left you should add a1, a2 etc. for each header you wish to include
                                          // so if you want 4 headers you should add a1, a2, a3, a4 in the format shown
                                          // enclosed in double quotes
function openClose(theID) {
  for(var i=0; i < divNum.length; i++) {
    if (divNum[i] == theID) {
      if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }
      else {
        document.getElementById(divNum[i]).style.display = "block"
      }
  } else {
    document.getElementById(divNum[i]).style.display = "none"; }
  }
}

Open in new window

0
 
Gurvinder Pal SinghCommented:
i have already suggested the solution in prev question...didn't I?
And i still don't see the code being changed here
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Hi, no the solution provided in the other thread doesn't match what I am asking.
I want the image BEHIND the title to change when it slides down...can you see in the picture above?
The solution you provided added an image behind the text that slides out...not the title?
0
 
hieloCommented:
the code you are after is very SIMILAR to the attached code.  Can't tell you for certain without looking at the HTML markup you actually have.
function openClose(theID) {
  for(var i=0; i < divNum.length; i++) 
  {
    if (divNum[i] == theID) 
	{
      if (document.getElementById(divNum[i]).style.display == "block") 
	  { 
	  		document.getElementById(divNum[i]).style.display = "none" 
	  		document.getElementById(divNum[i]).style.backgroundImage = "url('/images/closed.gif')"; 
	  }
      else 
	  {
        document.getElementById(divNum[i]).style.display = "block"
 		document.getElementById(divNum[i]).style.backgroundImage = "url('/images/open.gif')"; 
      }
    } 
	else 
	{
      document.getElementById(divNum[i]).style.display = "none"; 
	}
  }
}

Open in new window

0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Hi all, thanks for the reply.
I have tried hielos code and it adds an image to the background text...not the title...

I need the top image to change see http://qsd.ey3host.com/sedation-anaethesia/
0
 
Amanda WatsonWeb DeveloperAuthor Commented:
Your solution worked perfectly thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.