Ever wanted to hide a client-side element based on the visibility of the server-side element in ASP.NET? The below achieves this by using the Visible property and some CSS.

Suppose you have the following: 


<div id="clientElement">Blah Blah...</div>
<div id="serverElement" runat="server">Some more Blah...</div>

Now the #clientElement needs to be hidden when the #serverElement is not rendered. To achieve this, we will use the <%= serverElement.Visible %> property in a class for #clientElement. 


<div id="clientElement" class="visible<%= serverElement.Visible %>">
  Blah Blah...
</div>

The class applied to #clientElement when #serverElement is hidden will be visibleFalse and we will hide such elements in CSS. 


<style>
  .visibleFalse {display: none;}
</style>

Have any suggestions? Better techniques? Please share below.