runtime error 'function undefined'

Im trying to make it so that in a div tag different search fields appear on click of a link in a menu and only one form shows at a time. function toggleDisplay(id) { document.getElementById(id).style.visibility = "visible"; if (document.getElementById(id).style.display == "none") { document.getElementById(id).style.display = ""; ) else { document.getElementById(id).style.display = "none"; ) }its saying 'toggleDisplay' is undefined

 

JxnNC,

You are using ")" instead of "}" few times. Fixing those typos should resolve your issue.

 

function toggleDisplay(id) { document.getElementById(id).style.visibility = "visible"; if (document.getElementById(id).style.display == "none") { document.getElementById(id).style.display = ""; } else { document.getElementById(id).style.display = "none"; } }This returns the same error...

 

That code is fine.
Here is a sample that works with the mentioned code (verified):

<script>
function toggleDisplay(id) {
    document.getElementById(id).style.visibility = "visible";
    if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "";
    } else {
        document.getElementById(id).style.display = "none";
    }
}
</script>
<div id="testDiv">Content</div>
<button onClick="toggleDisplay('testDiv');">Show/Hide</button>

Code (markup):

Maybe you have a typo in the function call part? Can you show the whole code or post URL to your page?

 

Try this one

function toggleDisplay(id) {

  var togglediv = document.getElementById(id);

  if (togglediv.style.display == "none") {
   togglediv.style.display = "block";
  }
  else {
    togglediv.style.display = "none";
  }

}

Code (markup):

On the link use

<a href="#" onClick="toggleDisplay('divid'); return false;">Show/hide searchbox</a>

Code (markup):

toggleDisplay('divid'); in there (divid ) replace with the div id of your search form to have it show/hide upon click.

You might also want to consider using jquery, i find it a lot more useful, with less writing

 

Im calling it with this Basic and copy and pasted what you posted and linked it by putting it in the content placeholder of an asp page in visual studio2010, and i put the code in a javascript folder...

 

Please post the following parts of your code:
1. Contents of your .js file in javascript folder
2. Part of your HTML code where you include the mentioned .js file
2. Part of your HTML code where you are using toggleDisplay function

 

This is whats in js folder
-----//<script language="javascript" type="text/javascript">

function toggleDisplay(id) {
document.getElementById(id).style.visibility = "visible";
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = "";
} else {
document.getElementById(id).style.display = "none";
}
}

</script>-----.//

 

This is how i put it in html--//<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="js/JScript1.js" type="text/javascript"></script>
</asp:Content>--//

 

This is how I called it ---///<button onClick="toggleDisplay('searchBasic');">Basic</button> ---///

 

Remove the "<script language="javascript" type="text/javascript">" and "</script>" lines from your js/JScript1.js file and check if everything works then.

 

The RED lines do not belong in a .js file. Get rid of them.

 

Well, it stopped the runtime error, but now, its just not changing the space like I wanted it to. Were about to start using Kendo UI for this part though I believe, I guess I am curious as to why it was not functioning properly anyway, but thank you for all your help