Hidden
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');
hide.style.display='none';
</script>
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.
Bigint Blog 