SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    USA
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help changing icons on content-switcher script

    The script can be viewed here.

    I'd like it so that the "+" button changes to a "-" button when the content
    for its respective question is selected. Does this make sense?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Frequently Asked Questions</title>
    	<script type="text/javascript">
    	
    	/***********************************************
    	* Switch Content script-  Dynamic Drive (www.dynamicdrive.com)
    	* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
    	* Visit http://www.dynamicdrive.com/ for full source code
    	***********************************************/
    	
    	var enablepersist="on" //Enable saving state of content structure using session cookies?
    	var collapseprevious="yes" //Collapse previously open content when opening present?
    	
    	if (document.getElementById){
    	document.write('<style type="text/css">')
    	document.write('.switchcontent{display:none;}')
    	document.write('</style>')
    	}
    	
    	function getElementbyClass(classname){
    	ccollect=new Array()
    	var inc=0
    	var alltags=document.all? document.all : document.getElementsByTagName("*")
    	for (i=0; i<alltags.length; i++){
    	if (alltags[i].className==classname)
    	ccollect[inc++]=alltags[i]
    	}
    	}
    	
    	function contractcontent(omit){
    	var inc=0
    	while (ccollect[inc]){
    	if (ccollect[inc].id!=omit)
    	ccollect[inc].style.display="none"
    	inc++
    	}
    	}
    	
    	function expandcontent(cid){
    	if (typeof ccollect!="undefined"){
    	if (collapseprevious=="yes")
    	contractcontent(cid)
    	document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
    	}
    	}
    	
    	function revivecontent(){
    	contractcontent("omitnothing")
    	selectedItem=getselectedItem()
    	selectedComponents=selectedItem.split("|")
    	for (i=0; i<selectedComponents.length-1; i++)
    	document.getElementById(selectedComponents[i]).style.display="block"
    	}
    	
    	function get_cookie(Name) { 
    	var search = Name + "="
    	var returnvalue = "";
    	if (document.cookie.length > 0) {
    	offset = document.cookie.indexOf(search)
    	if (offset != -1) { 
    	offset += search.length
    	end = document.cookie.indexOf(";", offset);
    	if (end == -1) end = document.cookie.length;
    	returnvalue=unescape(document.cookie.substring(offset, end))
    	}
    	}
    	return returnvalue;
    	}
    	
    	function getselectedItem(){
    	if (get_cookie(window.location.pathname) != ""){
    	selectedItem=get_cookie(window.location.pathname)
    	return selectedItem
    	}
    	else
    	return ""
    	}
    	
    	function saveswitchstate(){
    	var inc=0, selectedItem=""
    	while (ccollect[inc]){
    	if (ccollect[inc].style.display=="block")
    	selectedItem+=ccollect[inc].id+"|"
    	inc++
    	}
    	
    	document.cookie=window.location.pathname+"="+selectedItem
    	}
    	
    	function do_onload(){
    	getElementbyClass("switchcontent")
    	if (enablepersist=="on" && typeof ccollect!="undefined")
    	revivecontent()
    	}
    	
    	
    	if (window.addEventListener)
    	window.addEventListener("load", do_onload, false)
    	else if (window.attachEvent)
    	window.attachEvent("onload", do_onload)
    	else if (document.getElementById)
    	window.onload=do_onload
    	
    	if (enablepersist=="on" && document.getElementById)
    	window.onunload=saveswitchstate
    	
    	</script>
    </head>
    
    <body style="font-family: verdana, optima, arial, sans-serif; font-size: 11px;">
    
    <h5 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer"><img align="absmiddle" src="expand.gif" alt="expand" width="11" height="11" border="0"> Question One?</h5>
    <div id="sc1" class="switchcontent"><blockquote>
    <!-- Begin Answer -->
    	<p>Answer One</p>
    <!-- End Answer -->
    </blockquote></div>
    
    <h5 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer"><img align="absmiddle" src="expand.gif" alt="expand" width="11" height="11" border="0"> Question Two?</h5>
    <div id="sc2" class="switchcontent"><blockquote>
    <!-- Begin Answer -->
    	<p>Answer Two.</p>
    <!-- End Answer -->
    </blockquote></div>
    
    <h5 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer"><img align="absmiddle" src="expand.gif" alt="expand" width="11" height="11" border="0"> Question Three?</h5>
    <div id="sc3" class="switchcontent"><blockquote>
    <!-- Begin Answer -->
    	<p>Answer Three.</p>
    <!-- End Answer -->
    </blockquote></div>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Frequently Asked Questions</title>
    	<script type="text/javascript">
    	
    	/***********************************************
    	* Switch Content script-  Dynamic Drive (www.dynamicdrive.com)
    	* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
    	* Visit http://www.dynamicdrive.com/ for full source code
    	***********************************************/
    	
    	var preload=new Image();preload.src='contract.gif'
    
    	var enablepersist="on" //Enable saving state of content structure using session cookies?
    	var collapseprevious="yes" //Collapse previously open content when opening present?
    	
    	if (document.getElementById){
    	document.write('<style type="text/css">')
    	document.write('.switchcontent{display:none;}')
    	document.write('</style>')
    	}
    	
    	function getElementbyClass(classname){
    	var temp=new Array()
    	var inc=0
    	var alltags=document.all? document.all : document.getElementsByTagName("*")
    	for (i=0; i<alltags.length; i++){
    	if (alltags[i].className==classname)
    	temp[inc++]=alltags[i]
    	}
    	return temp
    	}
    	
    	function contractcontent(omit){
    	var el,inc=0
    	while (el=ccollect[inc]){
    	if (el.id!=omit)
    	el.style.display="none"
    	inc++
    	}
    	inc=0
    	while (el=icon[inc])
    	{
    	el.src=el.src.replace(/contract/, 'expand')
    	inc++
    	}
    	}
    	
    	function expandcontent(cid,el){
    	if (typeof ccollect!="undefined"){
    	if (collapseprevious=="yes")
    	contractcontent(cid)
    	var content=document.getElementById(cid),bWhich=content.style.display!="block"
    	content.style.display=(bWhich)? "block" : "none"
    	var icon=document.getElementById('icon'+cid)
    	icon.src=(bWhich)?icon.src.replace(/expand/, 'contract'):icon.src.replace(/contract/, 'expand');
    	}
    	}
    	
    	function revivecontent(){
    	contractcontent("omitnothing")
    	selectedItem=getselectedItem()
    	selectedComponents=selectedItem.split("|")
    	for (var id,icon,i=0; i<selectedComponents.length-1; i++)
    	{
    	id=selectedComponents[i]
    	document.getElementById(id).style.display="block"
    	icon=document.getElementById('icon'+id)
    	icon.src=icon.src.replace(/expand/, 'contract');
    	}
    	}
    	
    	function get_cookie(Name) { 
    	var search = Name + "="
    	var returnvalue = "";
    	if (document.cookie.length > 0) {
    	offset = document.cookie.indexOf(search)
    	if (offset != -1) { 
    	offset += search.length
    	end = document.cookie.indexOf(";", offset);
    	if (end == -1) end = document.cookie.length;
    	returnvalue=unescape(document.cookie.substring(offset, end))
    	}
    	}
    	return returnvalue;
    	}
    	
    	function getselectedItem(){
    	if (get_cookie(window.location.pathname) != ""){
    	selectedItem=get_cookie(window.location.pathname)
    	return selectedItem
    	}
    	else
    	return ""
    	}
    	
    	function saveswitchstate(){
    	var inc=0, selectedItem=""
    	while (ccollect[inc]){
    	if (ccollect[inc].style.display=="block")
    	selectedItem+=ccollect[inc].id+"|"
    	inc++
    	}
    	
    	document.cookie=window.location.pathname+"="+selectedItem
    	}
    	
    	function do_onload(){
    	ccollect = getElementbyClass("switchcontent")
    	icon=getElementbyClass("icon")
    	if (enablepersist=="on" && typeof ccollect!="undefined")
    	revivecontent()
    	}
    	
    	
    	if (window.addEventListener)
    	window.addEventListener("load", do_onload, false)
    	else if (window.attachEvent)
    	window.attachEvent("onload", do_onload)
    	else if (document.getElementById)
    	window.onload=do_onload
    	
    	if (enablepersist=="on" && document.getElementById)
    	window.onunload=saveswitchstate
    	
    	</script>
    </head>
    
    <body style="font-family: verdana, optima, arial, sans-serif; font-size: 11px;">
    
    <h5 onClick="expandcontent('sc1',this)" style="cursor:hand; cursor:pointer"><img id="iconsc1" class="icon" align="absmiddle" src="expand.gif" alt="expand" width="19" height="16" border="0"> Question One?</h5>
    <div id="sc1" class="switchcontent"><blockquote>
    <!-- Begin Answer -->
    	<p>Answer One</p>
    <!-- End Answer -->
    </blockquote></div>
    
    <h5 onClick="expandcontent('sc2',this)" style="cursor:hand; cursor:pointer"><img id="iconsc2" class="icon" align="absmiddle" src="expand.gif" alt="expand" width="19" height="16" border="0"> Question Two?</h5>
    <div id="sc2" class="switchcontent"><blockquote>
    <!-- Begin Answer -->
    	<p>Answer Two.</p>
    <!-- End Answer -->
    </blockquote></div>
    
    <h5 onClick="expandcontent('sc3',this)" style="cursor:hand; cursor:pointer"><img id="iconsc3" class="icon" align="absmiddle" src="expand.gif" alt="expand" width="19" height="16" border="0"> Question Three?</h5>
    <div id="sc3" class="switchcontent"><blockquote>
    <!-- Begin Answer -->
    	<p>Answer Three.</p>
    <!-- End Answer -->
    </blockquote></div>
    
    </body>
    </html>
    
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    USA
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweeeeet!...works great, thanks!

    Ash


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •