?
Solved

Help finding correct javascript for collapsible divs

Posted on 2011-09-16
11
Medium Priority
?
201 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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

588 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