function not working

[shadowayex]

function editSection(section) {    var view = "view" + section;    var edit = "edit" + section;    document.getElementById(view).style.visibility = "hidden";	document.getElementById(view).style.height = "0px";	document.getElementById(view).style.overflow = "hidden";    document.getElementById(edit).style.visibility = "visible";    document.getElementById(edit).style.height = "";    document.getElementById(edit).style.overflow = "visible";    alert(view + "\n" + edit);}

<style type="text/css">#editaboutme       {height: 0px;                    overflow: hidden;                    visibility: hidden;}#editinterests     {height: 0px;                    overflow: hidden;                    visibility: hidden;}</style>

<p id="viewaboutme">    <h3>About Me</h3>    <a href="java script: void(0)" onclick="editSection('aboutme')">Edit</a></p><p id="editaboutme">    <form action="profile.php?mode=editinfo" method="post">        <div id="editaboutme">            <textarea name="aboutme" rows="10" cols="50"></textarea>            <input type="submit" name="submit" value="Save" />        </div>    </form></p><p id="viewinterests">    <h3>Interests</h3>    <a href="java script: void(0)" onclick="editSection('interests')">Edit</a></p><p id="editinterests">    <form action="profile.php?mode=editinfo" method="post">        <div id="editinterests">            <textarea name="interests" rows="10" cols="50"></textarea>            <input type="submit" name="submit" value="Save" />        </div>    </form></p>

Those are a few bits of code on a new page I'm writing. The edit sections are not displayed initially, but if the user clicks edit, the view section is supposed to disappear and the edit form is supposed to appear. It's a code very similar to one I wrote for a different page that works perfectly, except this one has an argument. But as you can see (if you test it), the argument works fine (the alert box displays what it should). Why is it not working?

[jeffman]

For one thing, you're putting big elements inside small elements--I mean, divs inside paragraphs. Should be the other way around. toggle the visibility of a whole div and the paragraphs etc that it contains.Changing the height of an invisible item to 0px is not necessary, but it's not causing the problem.On the other hand, I don't know what you hope to accomplish by this line (document.getElementById(edit).style.height = "", but it could very well be setting the height to 0px also, when what I think you're trying to do is remove the original declaration.I'd just get rid of all the height stuff. Visibility alone will do what you want. I've done that in many projects and never messed with the height.BUT -- If you're adjusting the height so that the invisible element doesn't take up space, then visibility is the incorrect property to toggle. Try toggling the display property between none and block (assuming it's a div). An element set to display:none takes up zero space, but without your having to adjust the dimensions manually.

[shadowayex]

When I don't set the height, it displays the space taken up by the form. It's just a bunch of empty space. The line that ends height = ""; takes away the 0px declaration I use so the empty space isn't shown. And I know that's not the problem because an extremely similar system with the same lines works perfectly.On the other hand, changing it to use display: none/block is less lines, but also didn't work at first. But I ended up discovering it was because I had both the outside and inside elements with the same id and the JavaScript was only applying it to one. But, after editing that, both ways work, but I'm going to stick with display. I didn't know it existed and it's a much easier way to accomplish the same thing I've been doing. Thanks for suggesting it.