smart2009
asked on
Closing a hidden div
Hello everyone,
I am sure this is an easy one but for some reason I am not able to get this to work. I have a serious of hidden divs that I created a link to show/hide each of the divs. I want to be able to add a close link inside the div so users can close the div. When I do it doesn't seem to close it properly. Any help would be greatly appreciated.
Link to open the div:
<a href="#" onClick="document.getEleme ntById('de tails').st yle.displa y=''; document.getElementById('d etails').s tyle.visib ility=''; document.getElementById('c omment').s tyle.displ ay='none'; document.getElementById('d elete').st yle.displa y='none'"> <img src="../../../_resources/i mages/icon s/archive. gif" alt="View Details" style="border:none"/></a>
Div:
<Div id="details" onclick="document.getEleme ntById('de tails').st yle.displa y=''" style="display:none; border: solid;">
<Div align="right" style="margin:10px;">  ;
<a href="#" onclick="document.getEleme ntById('de tails').st yle.displa y='none';r eturn false;"><strong>Close:&nbs p;x</stron g></a><BR />Just a test</Div></Div>
I am sure this is an easy one but for some reason I am not able to get this to work. I have a serious of hidden divs that I created a link to show/hide each of the divs. I want to be able to add a close link inside the div so users can close the div. When I do it doesn't seem to close it properly. Any help would be greatly appreciated.
Link to open the div:
<a href="#" onClick="document.getEleme
Div:
<Div id="details" onclick="document.getEleme
<Div align="right" style="margin:10px;"> 
<a href="#" onclick="document.getEleme
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
jamesbcox1980: How would this work with multiple divs I assume I would need to change the Element ID to the name of the new div like this?
<a href="javascript: void(0)" onclick="document.getEleme ntById('de tails').st yle.displa y=document .getElemen tById('det ails').sty le.display =='none'?' block':'no ne';"><img src="../../../_resources/i mages/icon s/archive. gif" alt="Post a Comment" style="border:none"/></a>
<a href="javascript: void(0)" onclick="document.getEleme ntById('co mment').st yle.displa y=document .getElemen tById('com ment').sty le.display =='none'?' block':'no ne';"><img src="../../../_resources/i mages/icon s/comment. gif" alt="Post a Comment" style="border:none"/></a>
<a href="javascript: void(0)" onclick="document.getEleme ntById('de lete').sty le.display =document. getElement ById('dele te').style .display== 'none'?'bl ock':'none ';"><img src="_resources/images/ico n/trash.jp g" alt="Delete Record" style="border:none"/></a>
Then use divs like this?
<Div id="details" class="hidden_details" style="display: none; border: solid;"><Div align="right" style="margin:10px;">  ; <a href="#" onclick="document.getEleme ntById('de tails').st yle.displa y='none';r eturn false;"><strong>Close:&nbs p;x</stron g></a><BR /></Div> Details Div</Div>
<Div id="comment" class="hidden_comment" style="display: none; border: solid;"><Div align="right" style="margin:10px;">  ; <a href="#" onclick="document.getEleme ntById('de tails').st yle.displa y='none';r eturn false;"><strong>Close:&nbs p;x</stron g></a><BR /></Div> Comment Div</Div>
<Div id="delete" class="hidden_delete" style="display: none; border: solid;"><Div align="right" style="margin:10px;">  ; <a href="#" onclick="document.getEleme ntById('de tails').st yle.displa y='none';r eturn false;"><strong>Close:&nbs p;x</stron g></a><BR /></Div> Delete Div</Div>
At first this appears to work but after a couple clicks between the links at the first part I start getting a blank space almost like the div was there just not visible. Any ideas?
<a href="javascript: void(0)" onclick="document.getEleme
<a href="javascript: void(0)" onclick="document.getEleme
<a href="javascript: void(0)" onclick="document.getEleme
Then use divs like this?
<Div id="details" class="hidden_details" style="display: none; border: solid;"><Div align="right" style="margin:10px;"> 
<Div id="comment" class="hidden_comment" style="display: none; border: solid;"><Div align="right" style="margin:10px;"> 
<Div id="delete" class="hidden_delete" style="display: none; border: solid;"><Div align="right" style="margin:10px;"> 
At first this appears to work but after a couple clicks between the links at the first part I start getting a blank space almost like the div was there just not visible. Any ideas?
Yes that is correct, you would need to have a different ID for each link attached to a DIV. You can create a function to make less typing, and that function can include an argument that contains the ID, they way dachusa showed it. His function does precisely what mine does, but mine is less typing.
There's all kinds of stuff you could do using nextSibling. You wouldn't even need to specify an id. This really depends on the link being right before the DIV you want to hide, with no whitespace at all, so keep that in mind when you're trying to adjust it to your purposes.
There's all kinds of stuff you could do using nextSibling. You wouldn't even need to specify an id. This really depends on the link being right before the DIV you want to hide, with no whitespace at all, so keep that in mind when you're trying to adjust it to your purposes.
<script type="text/javascript">
function toggleDiv(elem)
{
elem.style.display=elem.style.display=='none'?'block':'none';
}
</script>
<table cellpadding="10" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<!-- I didn't move the DIV to the next line here so the the "nextSibling" would not be interpreted as a space or line break -->
<a href="javascript: void(0)" onclick="toggleDiv(this.nextSibling)">toggle 1</a><div style="display: none;">
Some info.<br />
Some info.<br />
Some info.<br />
Some info.<br />
Some info.<br />
Some info.<br />
</div>
</td>
<td>
<a href="javascript: void(0)" onclick="toggleDiv(this.nextSibling)">toggle 1</a><div style="display: none;">
Some info.<br />
Some info.<br />
Some info.<br />
Some info.<br />
Some info.<br />
Some info.<br />
</div>
</td>
</tr>
</tbody>
</table>
I just saw that you are using "return false". That may be what's causing the problem
Also, all your other Close X links are pointing to the "Details" div
ASKER
Ok I think I got it going with what dachusa: had posted and I don't get the mysterious random blank space. I would like to thank you both for your help.
document.getElementById('d
Setting it to nothing simply removes the attribute. You also don't need to set visibility. "display" is all you need.
I actually like the little code that toggles it rather than two separate links. Here's how it works. First, anytime you check for a CSS attribute using javascript, you must set one in the inline style, like I did below, using style="display: none". Here we are toggling "display" so that's what we set.
We are going to use the ?: operator, which works like this.
variable = (condition) ? this if true : this if false
We are setting something (variable or attribute) depending on whether or not a condition is true.
If the display is already set to 'none', we are going to set it to 'block', and if not, we are setting it back to 'none'.
Open in new window