使用Jquery在页面加载中隐藏div

Question

I have some div in my code as mentioned below. Through Jquery I want to hide div having class="redCategory redCap vertical". My Jquery code to hide div is $(".redCap").hide(); but after page load div is not getting hidden. What should be Jquery? I want to hide div during page load.

<div class="redLinkContainer">

    <span class="accessibleText" aria-level="1" role="heading"></span>
    <div class="redCategory redHome adjacent"><a> href="https://example.com/">1</a></div>
    <div class="redCategory redContact adjacent"><a> href="https://example.com/">2</a>></div>
    <div class="redCategory Things adjacent"><a> href="https://example.com/">3</a></div>
    <div class="redCategory redCap vertical">
        <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
          </div>
     <div class="redCategory ManyThings adjacent"><a> href="https://example.com/">5</a></div>
    </div>

Answer 1

put hidden in the div:

 <div class="redCategory redCap vertical" hidden> <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a> </div> 

Answer 2

Add this to css file

.divHide{display:none;}
.divShow{display:block;}

Your HTML code:

<div class="redLinkContainer divHide"></div>

when the page load div is hidden.

Answer 3

<a> tag is wrong format. Please use proper format

<a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>

Please find the Below URL,(check your code)

https://jsfiddle.net/wg62c8j5/

Answer 4

I did some tests here and it work as expected.

<script type="text/javascript">

 $(".redCap").hide();

</script>

<div class="redLinkContainer">

    <span class="accessibleText" aria-level="1" role="heading"></span>
    <div class="redCategory redHome adjacent"><a>   href="https://example.com/">1</a></div>
    <div class="redCategory redContact adjacent"><a> href="https://example.com/">2</a></div>
    <div class="redCategory Things adjacent"><a> href="https://example.com/">3</a></div>
    <div class="redCategory redCap vertical">
       <a class="red CategoryTitle redCategoryHeader" href="https://example.com/">4</a>
      </div>
  <div class="redCategory ManyThings adjacent"><a> href="https://example.com/">5</a></div>

Are you sure your JQuery library is being loaded ?