Jump to content

Toggle Visibility of Multiple Items Simultaneously


sleepyw
Go to solution Solved by sleepyw,

Recommended Posts

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.

Link to comment
Share on other sites

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 by Psycho
Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.