CoderChris CoderChris - 1 month ago 6
HTML Question

Hide <li Class> through Body (No Header Access or CSS)

I do not have access to the header and I cannot apply any custom CSS, I am curious if there is a way to append "display none" or a value "hidden (or anything!) to an existing LI class so it does not appear when I am on a specific page?

Here is Header HTML

<header>
<nav class="mean-nav">
<ul id="member-menu-1">
<li class="class-1">...</li>
<li class="class-2">...</li>
<li class="class-3">...</li>
<li class="class-4">...</li>
</ul>
</nav>
</header>


Here is What I am looking for at the page level:

<header>
<nav class="mean-nav">
<ul id="menu-member-menu-e">
<li class="class-1">...</li>
<li class="class-2" style="display: none;">...</li>
<li class="class-3">...</li>
<li class="class-4">...</li>
</ul>
</nav>
</header>

<body>
<ANY FUNCTION THAT CAN APPEND <style="Display: none;"> To <li class="class-2">
</body>

Answer

Try to hide the element using jQuery :

$('li.class-2').hide();

NOTE : the hide() function will add style="display: none;" to the element automatically.

Hope this helps.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav class="mean-nav">
    <ul id="menu-member-menu-e">
      <li class="class-1">...</li>
      <li class="class-2">...</li>
      <li class="class-3">...</li>
      <li class="class-4">...</li>
    </ul>
  </nav>
</header>

<body>
  <script>
    $('li.class-2').hide();
  </script>
</body>

Comments