?
Solved

Closing  a hidden div

Posted on 2009-07-13
7
Medium Priority
?
441 Views
Last Modified: 2012-05-07
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.getElementById('details').style.display='';  document.getElementById('details').style.visibility=''; document.getElementById('comment').style.display='none'; document.getElementById('delete').style.display='none'"><img src="../../../_resources/images/icons/archive.gif" alt="View Details" style="border:none"/></a>

Div:
<Div id="details" onclick="document.getElementById('details').style.display=''" style="display:none; border: solid;">
 <Div align="right" style="margin:10px;">&nbsp;&nbsp;
 <a href="#" onclick="document.getElementById('details').style.display='none';return false;"><strong>Close:&nbsp;x</strong></a><BR />Just a test</Div></Div>


0
Comment
Question by:smart2009
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 12

Accepted Solution

by:
Chad Haney earned 1500 total points
ID: 24842884
Try this.

function toggle(id){
      var element = document.getElementById(id);
      if(element.style.display=="none"){
             element.style.display="block";
      }else{
             element.style.display="none";
      }
}
 
/*Then use the onclick="toggle('details');
 
This will allow you to use one command to flip back and forth between the display none/block.
 
for your close do similar to this*/
 
<a href="javascript:void 0" onclick="toggle('details')">Open/Close</a>
<div id="details" style="display:none;">
<a href="javascript:void 0" onclick="toggle('details')">Close</a>
</div>

Open in new window

0
 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24843092
You only need

document.getElementById('details').style.display='none';

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'.
<a href="javascript: void(0)" onclick="document.getElementById('details').style.display=document.getElementById('details').style.display=='none'?'block':'none';">toggle</a>
<div id="details" class="hidden_details" style="display: none;">
    Some info.<br />
    Some info.<br />
    Some info.<br />
    Some info.<br />
    Some info.<br />
</div>

Open in new window

0
 

Author Comment

by:smart2009
ID: 24843624
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?

&nbsp;&nbsp;<a href="javascript: void(0)" onclick="document.getElementById('details').style.display=document.getElementById('details').style.display=='none'?'block':'none';"><img src="../../../_resources/images/icons/archive.gif" alt="Post a Comment" style="border:none"/></a>


&nbsp;&nbsp;<a href="javascript: void(0)" onclick="document.getElementById('comment').style.display=document.getElementById('comment').style.display=='none'?'block':'none';"><img src="../../../_resources/images/icons/comment.gif" alt="Post a Comment" style="border:none"/></a>


&nbsp;&nbsp;<a href="javascript: void(0)" onclick="document.getElementById('delete').style.display=document.getElementById('delete').style.display=='none'?'block':'none';"><img src="_resources/images/icon/trash.jpg" 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;">&nbsp;&nbsp;  <a href="#" onclick="document.getElementById('details').style.display='none';return false;"><strong>Close:&nbsp;x</strong></a><BR /></Div> Details Div</Div>

<Div id="comment" class="hidden_comment" style="display: none; border: solid;"><Div align="right" style="margin:10px;">&nbsp;&nbsp;  <a href="#" onclick="document.getElementById('details').style.display='none';return false;"><strong>Close:&nbsp;x</strong></a><BR /></Div> Comment Div</Div>

<Div id="delete" class="hidden_delete" style="display: none; border: solid;"><Div align="right" style="margin:10px;">&nbsp;&nbsp;  <a href="#" onclick="document.getElementById('details').style.display='none';return false;"><strong>Close:&nbsp;x</strong></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?

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24844125
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.
<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>

Open in new window

0
 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24844149
I just saw that you are using "return false".  That may be what's causing the problem
0
 
LVL 4

Expert Comment

by:jamesbcox1980
ID: 24844161
Also, all your other Close X links are pointing to the "Details" div
0
 

Author Comment

by:smart2009
ID: 24844266
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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month9 days, 13 hours left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question