How to hide nav bar for signing page using jquery so that shared layout still shows on other documents?

Question

I have a rough idea that by using jquery I can hide certain html divs. There is a shared layout for the nav bar for all pages but I don't want it showing in the initial signing in page only after they pressed submit and its valid should the navbar show

I tried within my signin page to call on the document and then calling hide on the object with that class.

This is my NavBar definition which is just came with the project

   <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">HomeRepair</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

I added this script tag at the bottom of the signing in view

   <script> $(document).ready(function () { $("navbar navbar-inverse navbar-fixed-top").hide() });
</script>

Once I rebuilt the project the nav bar wasn't hidden

instead of `$(document).ready(function () { $("navbar navbar-inverse navbar-fixed-top").hide()` just do it like `$(document).ready(function () { $(".navbar").hide()` — manish thakur, Aug 19 '19 at 12:34
Possible duplicate of [How can I select an element with multiple classes in jQuery?](https://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery) — Heretic Monkey, Aug 19 '19 at 12:49

Jayasanka Weerasinghe · Answer 1 · 2019-08-19T13:01:50.173

1

There are two ways:

Use your existing css class "navbar"

<script>
    $(document).ready(function () {
        $(".navbar").hide();
    });
</script>

Add an id to your navbar:

<nav id="navBar" class="navbar navbar-inverse navbar-fixed-top">

and change your js code as follows:

    <script>
        $(document).ready(function () {
            $("#navBar").hide();
        });
    </script>

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element and .class selector finds elements with a specific class.

You can find more on JQuery Selectors here: W3School: jQuery Selectors

edited Aug 19 '19 at 13:01

answered Aug 19 '19 at 12:37

Jayasanka Weerasinghe

155
7

Or better yet, [learn about selectors from jQuery itself](https://learn.jquery.com/using-jquery-core/selecting-elements/), if you don't like ads. – Heretic Monkey Aug 19 '19 at 12:47
@HereticMonkey Thank you, show for jquery you have to select by id instead of class? p.s have you seen that new blazor thing i can't wait for it also i found a different solution too which doesn't expose the navbar to the login page – Darman Aug 19 '19 at 13:22
@Darman No, you do not have to select by id instead of class. Not sure how you got that from my comment. – Heretic Monkey Aug 19 '19 at 13:24
@HereticMonkey been a long day, i think i meant which is better to use classes or ids? like i know for list and dictionary, dictionary are faster for lookup is there some advantages using one over the other – Darman Aug 19 '19 at 13:25
Sounds like a new question, although one that has been asked before: [What's the difference between an id and a class?](https://stackoverflow.com/q/544010/215552), [Which method is better? CSS classes or ID's?](https://stackoverflow.com/q/5171450/215552) – Heretic Monkey Aug 19 '19 at 13:29
@Darman ids must be unique but class can be given to more than one element, class is used as common selectors suppose you have 3 elements to which you want to give same style give each element the same class and then apply style to that class only once, but in case of id it should be unique to all elements – manish thakur Aug 19 '19 at 13:35

score 1 · Accepted Answer · answered Aug 19 '19 at 12:39

1

You can do it like below

<script> $(document).ready(function () { $(".navbar").hide() });

or

<script> $(document).ready(function () { $(".navbar-fixed-top").hide() });

Or

Just don't include navbar code in your login page,if you are working on multiple pages like one for login and other welcome

Class is denoted by . and ids by # to use as selector in jquery

answered Aug 19 '19 at 12:39

manish thakur

760
9
35
76

Hey thank you for replying yeah i'm bad with jquery i only started learning about it like a few hours ago. I'm wondering if the solution i found is better since it doesn't technically build the narbar unless its not on the login on page otherwise display – Darman Aug 19 '19 at 13:24

score 0 · Answer 3 · answered Aug 19 '19 at 13:20

Hello thank you for your answers, i managed to implement it a different way because i wanted to only show it for all the other pages except the login(homepage) so i wrapped the whole navbar in a if statement and had conditioned on whether its not the home page then show bar

  @if (ViewContext.RouteData.Values["controller"].ToString() != "Home")

but i'm wondering if this or the jquery selector method is better

How to hide nav bar for signing page using jquery so that shared layout still shows on other documents?

3 Answers3