Solved

Help finding correct javascript for collapsible divs

Posted on 2011-09-16
11
187 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 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
 
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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 …
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 …
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now