To hide a div on Page Load using Jquery

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>

I think it depends where you put your JavaScript code. Before HTML? It'll trigger too early. — Adriano Repetti, Jul 01 '15 at 14:06
Are you hiding the div after the page is loaded , i.e inside $(document).ready(function(){ $(".redCap").hide(); }); Or without using document ready function ? If you don't use document ready it will not work . Also is there any JS which unhides all div ? This might conflict with hide . Share your code will help more to identify ? — Vivek Tankaria, Jul 01 '15 at 14:12

score 0 · Answer 1 · answered Jul 01 '15 at 14:12

0

put hidden in the div:

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

answered Jul 01 '15 at 14:12

Midori Fukami

11
2

score 0 · Answer 2 · answered Jul 01 '15 at 14:20

0

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.

answered Jul 01 '15 at 14:20

Kamalesh

21
3

score 0 · Answer 3 · answered Jul 01 '15 at 14:25

0

<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/

answered Jul 01 '15 at 14:25

Neo Vijay

823
9
13

score 0 · Answer 4 · answered Jul 01 '15 at 14:38

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 ?

To hide a div on Page Load using Jquery

4 Answers4