Solved

Help finding correct javascript for collapsible divs

Posted on 2011-09-16
11
191 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 19

Expert Comment

by:Rikin Shah
ID: 36547779
0
 
LVL 40

Expert Comment

by:gurvinder372
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
Independent Software Vendors: 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:gurvinder372
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:gurvinder372
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 500 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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…

730 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