Search the Community

I've got some code that will toggle items on and off, and all works. However, I have 4 items that are clickable, and whichever is clicked, the div field for that item opens in the same area of the sacreen. Therefore, when one of the items is clicked, anything else open needs to close, or they stack on top of each other. I cannot figure out how to get any other items to close when a new one is clicked. Here are the elements I'm using right now: CSS: .unhidden { background-color: #ff0000; height: 190px; width: 300px;} .hidden { visibility: hidden;} JS: <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script> HTML DIV that is clicked: <div><a href="javascript:unhide('ONE');" >ONE</a></div> <div id="ONE" class="hidden">Text that only shows up when ONE is clicked.</div> <div><a href="javascript:unhide('TWO');" >TWO</a></div> <div id="TWO" class="hidden">Text that only shows up when TWO is clicked.</div> <div><a href="javascript:unhide('THREE');" >THREE</a></div> <div id="THREE" class="hidden">Text that only shows up when THREE is clicked.</div> <div><a href="javascript:unhide('FOUR');" >FOUR</a></div> <div id="FOUR" class="hidden">Text that only shows up when FOUR is clicked.</div> I've tried several variations (creating new functions, each that would hide the previous item when clicked), or adding condiitons to the existing JS to hide the others. I'm somewhat of a JS newb, and I could figure this out if it were PHP, but i don't use JS much. This particular task requires JS. Any ideas how to modify what I'm using to work? Thanks in advance.