Menu
I have a page with a div that is hidden until clicked on, and can be hidden if clicked on again (at least that is the goal). The html looks like:
[code=html]
<div id=’search_box’ class=’div_hide’ onClick=’toggle_div(this.id);’>
<h2><img class=’arrow_img’ src=’image.png’ />Text</h2>
<span>Content (search box)</span>
</div>
I currently have the following javascript:
[CODE]
function toggle_div (divId) {
var divName = document.getElementById(divId);
var divStatus = divName.className;
var divImage = divName.getElementsByTagName(‘img’);
var imgExpand = ‘image1.png’
var imgCollapse = ‘image2.png’
if (divStatus = ‘div_show’) {
divStatus = divStatus.replace(/bdiv_showb/,”);
divName.className = divStatus;
newStatus = ‘div_hide’;
divStatus.className = newStatus;
divImage.src = imgExpand;
}
else {
divStatus = divStatus.replace(/bdiv_hideb/,”);
divName.className = divStatus;
newStatus = ‘div_show’;
divStatus.className = newStatus;
divImage.src = imgCollapse;
*/
}
}
My goal being to click on the main <div> and show the content in the <span> and change the image, and then clicking again returns it to it’s original (hidden) state. I have been able to successfully show the <div> but can’t get it to hide again. And when troubleshooting it using Firebug it shows that clicking on the <div> is simply removing the class that hides it, leaving no class, and definately not replacing it like I am trying to do. Any ideas why the second click is not producing ANY results? Also, if I get it working I have thought that by making the entire <div> have the onClick handler if someone tries to click inside the unhidden <span> (for links or to click in a search box) would result in hiding the <span> rather than following the link or focusing on the input box. Is there any possibility for that?
The main reason handled the <div> is because there will be multiple sections that I would like to reuse the function on, and creating an id for the <div> and then referencing this.id was the first way I was able to get the functionality that I currently have. So any suggestions for improvement are appreciated ?
Thanks!