Russia Posted March 13, 2011 Share Posted March 13, 2011 Hey guys, Im creating a javascript content expander and would like to know how to create it so it changed the image from an down arrows to open the box, and a down arrow to close the box. Here is my current code. <script type="text/javascript"> //var persistmenu="yes" var persisttype="sitewide" if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } 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 onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> <style type="text/css"> .sectionHeadernews .plaquenews { background: url(../layout/section_header_plaque_medium.png) center no-repeat; } .sectionHeadernews .plaquenews, .sectionHeaderchat .plaque_medium, .sectionHeaderchat .plaque_large { height: 26px; text-align:center overflow: hidden; line-height: 25px; font-size: 14px; font-family: Palatino Linotype, Book Antiqua, Palatino, Times New Roman, Times, serif; font-weight: bold; font-variant: small-caps; color: #30291f; } .sectionHeadernews { background: #bd9c5a url(../layout/section_header_bg.png) top repeat-x; width: 754px; } .sectionHeadernews .leftnews { background: url(../layout/section_header_left_news.png) left no-repeat; } .sectionHeadernews .rightnews { background: url(../layout/section_header_right_news.png) right no-repeat; } </style> <div class="sectionHeadernews"> <div class="leftnews"> <div class="rightnews" onclick="SwitchMenu('sub1')" > <div class="plaquenews"> Click to view current website news </div> </div> </div> </div> I want the <div class="rightnews"> thing to change from an up arrow to a down arrow. Here are the icons im using. For the box to contract: for the box to expand. If someone could help me out by adding the code so the images switch would be great! Link to comment https://forums.phpfreaks.com/topic/230490-switch-image-on-expanded-content/ Share on other sites More sharing options...
Russia Posted March 13, 2011 Author Share Posted March 13, 2011 bump. Link to comment https://forums.phpfreaks.com/topic/230490-switch-image-on-expanded-content/#findComment-1186953 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.