By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,867 Members | 1,964 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,867 IT Pros & Developers. It's quick & easy.

Show or Hide Elements

BRawn
P: 28
I'm new to ASP.NET and I've been trying write code to show and hide certain elements on link's onclick event, but no matter what I try, nothing's working. Here's my scenario...

I have a MasterPageFile with 3 ContentPlaceHolders. One for navigation (links which call the web forms which populate the main content placeholder), one for sub-categories (should there be) and one for the main content (which gets populated with web forms).

If I have a link which contains sub-categories, the sub-categories ContentPlaceHolder should populate with the links for each sub-category respectively. The idea is to use the sub-category links to jump to a specific place on the page.

The problem I'm having is that I can't seem to show or hide the sub-categories ContentPlaceHolder, no matter what I try. Here's what I've tried:

JavaScript...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script type="text/javascript">
  3.  
  4.     function hideControl(controlID)
  5.     {
  6.         document.getElementById(controlID).style.visibility = 'hidden';
  7.     }
  8.  
  9.     function showControl(controlID)
  10.     {
  11.         document.getElementById(controlID).style.visibility = 'visible';
  12.     }
  13.  
  14. </script>
  15.  
  16.  


Expand|Select|Wrap|Line Numbers
  1.  
  2. <script type="text/javascript">
  3.  
  4.     function hideControl(controlID)
  5.     {
  6.  
  7.         document.getElementById(controlID).style.display = 'block';
  8.     }
  9.  
  10.     function showControl(controlID)
  11.     {
  12.  
  13.         document.getElementById(controlID).style.display = 'none';
  14.     }
  15.  
  16. </script>
  17.  
  18.  



I tried using it like this (in my individual web forms):




Expand|Select|Wrap|Line Numbers
  1.  
  2. <%@ Page Language="C#" MasterPageFile="~/MasterPageFile.master" Title="Page Title" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="Server">
  4.  
  5. <div class="bodyBackgroundLeft_ContentDIV"><a class="subMenuItems" href="#" style="text-decoration: none; padding-right: 92px; overflow: visible" onclick="showControl(Content3)">Link 1</a></div>
  6. <div class="ClassLink"><a class="subMenuItems" href="#" style="text-decoration: none" onclick="hideControl(Content3)">Link 2</a></div>
  7.  
  8.  


I've also tried using the code-behind file, like this:




Expand|Select|Wrap|Line Numbers
  1.  
  2.     void hideContentPlaceHolders()
  3.     {
  4.         ContentPlaceHolder cph = (ContentPlaceHolder)this.Page.Master.FindControl("subContent");
  5.         cph.Visible = false;
  6.     }
  7.  
  8.     void showContentPlaceHolders()
  9.     {
  10.         ContentPlaceHolder cph = (ContentPlaceHolder)this.Page.Master.FindControl("subContent");
  11.         cph.Visible = true;
  12.     }
  13.  
  14.  


...and calling it like this:




Expand|Select|Wrap|Line Numbers
  1.  
  2. <%@ Page Language="C#" MasterPageFile="~/MasterPageFile.master" Title="Page Title" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="Server">
  4.  
  5. <div class="bodyBackgroundLeft_ContentDIV"><a class="subMenuItems" href="#" style="text-decoration: none; padding-right: 92px; overflow: visible" onclick="showContentPlaceHolders()">Link 1</a></div>
  6. <div class="ClassLink"><a class="subMenuItems" href="#" style="text-decoration: none" onclick="hideContentPlaceHolders()">Link 2</a></div>
  7.  
  8.  


The ContentPlaceHolder on my individual web forms look like this:



Expand|Select|Wrap|Line Numbers
  1.  
  2. <asp:Content ID="Content3" ContentPlaceHolderID="subContent" runat="server">
  3.     <div class="Link1"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
  4.     <div class="Link2"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
  5.     <div class="Link3"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
  6. </asp:Content>
  7.  
  8.  


And on my MasterPageFile...




Expand|Select|Wrap|Line Numbers
  1.  
  2. <div style="width: 185px; position: absolute; z-index: 5; margin-left: 0px; margin-top: 280px;">
  3.             <div class="bodyMenuTop"></div>
  4.             <div style="background-color: White; width: 185px; height: 220px;">
  5.  
  6.                 <asp:ContentPlaceHolder ID="subContent" runat="server">
  7.  
  8.                 </asp:ContentPlaceHolder>
  9.  
  10.             </div>
  11.             <div class="bodyMenuBottom"></div>
  12.         </div>
  13.  
  14.  


I usually get errors when loading pages using the JavaScript function, using the 'block' and 'none' display. The error message isn't really clear and it doesn't pin-point the location of the error. It usually says I'm missing a '{', but I can't see that I am...

What am I doing wrong?
Any assistance would be appreciated...
Sep 2 '11 #1

✓ answered by CroCrew

This is a asp.net question not a Classic ASP question.

CroCrew~

Share this Question
Share on Google+
1 Reply


CroCrew
Expert 100+
P: 563
This is a asp.net question not a Classic ASP question.

CroCrew~
Nov 17 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.