Show or Hide Elements

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • BRawn
    New Member
    • Jul 2010
    • 28

    #1

    Show or Hide Elements

    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 ContentPlaceHol ders. 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 ContentPlaceHol der 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 ContentPlaceHol der, no matter what I try. Here's what I've tried:

    JavaScript...

    Code:
    <script type="text/javascript">
    
        function hideControl(controlID)
        {
            document.getElementById(controlID).style.visibility = 'hidden';
        }
        
        function showControl(controlID)
        {
            document.getElementById(controlID).style.visibility = 'visible';
        }
    
    </script>


    Code:
    <script type="text/javascript">
    
        function hideControl(controlID)
        {
            
            document.getElementById(controlID).style.display = 'block';
        }
        
        function showControl(controlID)
        {
            
            document.getElementById(controlID).style.display = 'none';
        }
    
    </script>



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




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


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




    Code:
        void hideContentPlaceHolders()
        {
            ContentPlaceHolder cph = (ContentPlaceHolder)this.Page.Master.FindControl("subContent");
            cph.Visible = false;
        }
    
        void showContentPlaceHolders()
        {
            ContentPlaceHolder cph = (ContentPlaceHolder)this.Page.Master.FindControl("subContent");
            cph.Visible = true;
        }


    ...and calling it like this:




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


    The ContentPlaceHol der on my individual web forms look like this:



    Code:
    <asp:Content ID="Content3" ContentPlaceHolderID="subContent" runat="server">
        <div class="Link1"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
        <div class="Link2"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
        <div class="Link3"><a class="subMenuItems" href="#" style="text-decoration: none; overflow: visible">JumpToSection</a></div>
    </asp:Content>


    And on my MasterPageFile. ..




    Code:
    <div style="width: 185px; position: absolute; z-index: 5; margin-left: 0px; margin-top: 280px;">
                <div class="bodyMenuTop"></div>
                <div style="background-color: White; width: 185px; height: 220px;">
                
                    <asp:ContentPlaceHolder ID="subContent" runat="server">
                        
                    </asp:ContentPlaceHolder>
                
                </div>
                <div class="bodyMenuBottom"></div>
            </div>


    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...
  • CroCrew
    Recognized Expert Contributor
    • Jan 2008
    • 564

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

    CroCrew~

    Comment

    Working...