sleepyw Posted March 13, 2013 Share Posted March 13, 2013 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. Quote Link to comment https://forums.phpfreaks.com/topic/275631-toggle-visibility-of-multiple-items-simultaneously/ Share on other sites More sharing options...
Psycho Posted March 14, 2013 Share Posted March 14, 2013 (edited) I'm not sure how this being JavaScript vs. PHP is an issue. The problem is not language specific - it is a simple logic problem that is independent of the language. You could just code the function to iterate through all of the DIVs. Ones that are not the clicked one would be automatically hidden. And the one that was clicked would be toggled (as you have now). Without being an expert in JS you could just hard code the function for the four DIVs, But, a beter way is to name all the DIVs the same and reference them as a collection. <html> <head> <style> .unhidden { background-color: #ff0000; height: 190px; width: 300px;} .hidden { visibility: hidden;} </style> <script type="text/javascript"> function taggleDivs(selectedDivID, divsName) { var divList = document.getElementsByName(divsName); var styleName; for(i=0; i<divList.length; i++) { //Set default for all unclicked divs classNameVal = 'hidden'; if(divList[i].id == selectedDivID) { //Set value for the clicked div classNameVal = (divList[i].className=='hidden') ? 'unhidden' : 'hidden'; } divList[i].className = classNameVal; } return; } </script> </head> <body> <div><a href="javascript:taggleDivs('ONE', 'toggleDiv');" >ONE</a></div> <div id="ONE" class="hidden" name="toggleDiv">Text that only shows up when ONE is clicked.</div> <div><a href="javascript:taggleDivs('TWO', 'toggleDiv');" >TWO</a></div> <div id="TWO" class="hidden" name="toggleDiv">Text that only shows up when TWO is clicked.</div> <div><a href="javascript:taggleDivs('THREE', 'toggleDiv');" >THREE</a></div> <div id="THREE" class="hidden" name="toggleDiv">Text that only shows up when THREE is clicked.</div> <div><a href="javascript:taggleDivs('FOUR', 'toggleDiv');" >FOUR</a></div> <div id="FOUR" class="hidden" name="toggleDiv">Text that only shows up when FOUR is clicked.</div> </body> </html> EDIT: not sure why you set the style properties as you have them. Why not define the size as static and just toggle the display property instead of the visibility? Edited March 14, 2013 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/275631-toggle-visibility-of-multiple-items-simultaneously/#findComment-1418491 Share on other sites More sharing options...
Solution sleepyw Posted March 15, 2013 Author Solution Share Posted March 15, 2013 I had taken something that someone else created and simplified them for display purposes here. As for JS vs. PHP, it's an issue because I'm not as familiar with JS (functions and such) as simple PHP (the server this content is being hosted on doesn't support PHP). Thank you for your reply and suggestion! Quote Link to comment https://forums.phpfreaks.com/topic/275631-toggle-visibility-of-multiple-items-simultaneously/#findComment-1418823 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.