The problem is that get the error:

TypeError: div1.style is undefined

Which leads to the problem that the function isn't called and nothing happens.

JS

<script type="text/javascript">
  function siteChange() {
    var div1 = board1;
    var div2 = board2;

    if (div1.style.visibility == "collapse") {
      div2.style.visibility = "collapse";
      div1.style.visibility = "visible";
    } else {
      div1.style.visibility = "collapse";
      div2.style.visibility = "visible";

    }
  }
</script>

CSS

.FullDiv {
    height: 100%;
    width: 100%;    
}

ASP

<div id="board1" class="FullDiv">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>

ASP function call

<a href="Javascript:siteChange()" class="PageNumber">1</a>
<a href="Javascript:siteChange()" class="PageNumber">2</a>

The problem is that get the error:

TypeError: div1.style is undefined

Which leads to the problem that the function isn't called and nothing happens.

JS

<script type="text/javascript">
  function siteChange() {
    var div1 = board1;
    var div2 = board2;

    if (div1.style.visibility == "collapse") {
      div2.style.visibility = "collapse";
      div1.style.visibility = "visible";
    } else {
      div1.style.visibility = "collapse";
      div2.style.visibility = "visible";

    }
  }
</script>

CSS

.FullDiv {
    height: 100%;
    width: 100%;    
}

ASP

<div id="board1" class="FullDiv">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>

ASP function call

<a href="Javascript:siteChange()" class="PageNumber">1</a>
<a href="Javascript:siteChange()" class="PageNumber">2</a>

• javascript
• css
• asp

2 Answers 2

It can not be able to map your board1 and board2 that's why it is give an error:

 function siteChange() {
        var div1 = document.getElementById("board1");//change this
        var div2 = document.getElementById("board2");//change this
        if (div1.style.visibility == "collapse") {
        
          div2.style.visibility = "collapse";
          div1.style.visibility = "visible";
        } else {
          div1.style.visibility = "collapse";
          div2.style.visibility = "visible";
    
        }
      }

Now its work for you.

I guess it should be: var div1 = document.getElementById("board1") instead of var div1 = board1