[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Help finding correct javascript for collapsible divs

Posted on 2011-09-16
11
Medium Priority
?
199 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:Amanda Watson
11 Comments
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 36547779
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36547804
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 36547806
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36547821
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 36547954
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36547961
i have already suggested the solution in prev question...didn't I?
And i still don't see the code being changed here
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 36548348
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
 
LVL 82

Expert Comment

by:hielo
ID: 36549630
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
 
LVL 7

Accepted Solution

by:
Kishan Zunjare earned 2000 total points
ID: 36553836
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
 
LVL 11

Author Comment

by:Amanda Watson
ID: 36557235
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
 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 36557367
Your solution worked perfectly thank you
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question