Hi everyone. I'm trying to hide/show DIVs, and I believe I've gotten that down. But I'm trying to get it to where once I've shown one div, I want to be able to hide it without having to show another div.
Here's my javascript.
Here's my HTML:Code:function showHide(d) { var onediv = document.getElementById(d); var divs=['divID1','divID2','divID3','divID4','divID5']; for (var i=0;i<divs.length;i++) { if (onediv != document.getElementById(divs[i])) { document.getElementById(divs[i]).style.display='none'; } } onediv.style.display = 'block'; }
And my style:Code:<div id="categoryhold"> <a href="javascript:showHide('category1');">Category 1</a><br /> <div id="category1"><a href="#">Content Line 1</a><br /> <a href="#">Content Line 2</a><br /> <a href="#">Content Line 3</a></div><br /> <a href="javascript:showHide('category2');">Category 2</a><br /> <div id="category2"><a href="#">Content Line 1</a><br /> <a href="#">Content Line 2</a><br /> <a href="#">Content Line 3</a></div><br /> <a href="javascript:showHide('category3');">Category 3</a><br /> <div id="category3"><a href="#">Content Line 1</a><br /> <a href="#">Content Line 2</a><br /> <a href="#">Content Line 3</a></div><br /> <a href="javascript:showHide('category4');">Category 4</a><br /> <div id="category4"><a href="#">Content Line 1</a><br /> <a href="#">Content Line 2</a><br /> <a href="#">Content Line 3</a></div><br /> <a href="javascript:showHide('category5');">Category 5</a></div> <div id="category5"><a href="#">Content Line 1</a><br /> <a href="#">Content Line 2</a><br /> <a href="#">Content Line 3</a></div> </div>
Code:#categoryhold { width: auto; height: auto; } #category1 { display: none; } #category2 { display: none; } #category3 { display: none; } #category4 { display: none; } #category5 { display: none; }


Reply With Quote

Bookmarks