Hide a Layout Page Div Using JavaScript



There’s so much I need to share; however, I’m usually busy or I forget.  This time, I remembered though; so, here’s a neat snippet that someone might fine useful.

When I develop bespoke sites I usually use the ASP. Net C# Razor framework with _SiteLayout pages.  Layout pages are pages that contain HTML formatted content that can be shared by other pages on the website.

In this particular project I am using a _SiteLayout page situated in the  root/shared folder.  The _SiteLayout page is run from the _PageStart page.

My _SiteLayout page uses content blocks to add a header and footer to the layout.  Content blocks, are files that contain HTML-formatted content to be inserted in multiple pages.

When a browser requests a the layout page from the web server, ASP.NET inserts the content blocks (_header.cshtml and _footer.cshtml) at the point where the ‘RenderPage’ method is called in the _Layout page.  Phew!

The ASP. Net website explains _SiteLayout pages and the _PageStart page better than me; so, go the ASP. Net site if you want to know more.

The issue is, my _header.cshtml content block page contains a Bootsrap Carousel and I didn’t want to show the Carousel on certain pages.

I considered using an alternative layout page to do this, then I though that JavaScript could be a quick option.

So, I created a variable and set it to hide any element on the page with an id the same as the carousel div id using the style property and values display=’none’.

Then I placed the JavaScript snippet in script tags at the top of the page.

I called my variable ‘hide’, but this can be named anything you like as long as the variable name is not duplicated. See the code below:

<script type="text/javascript">

var hide = document.getElementById('carousel-741055');


And here is the opening div tag for the carousel:

<div class="carousel slide" id="carousel-741055">

Try it, it works.

Hope this helps someone.