Load a div with onload function

Question

I have 3 different div which shows particular content in each other. But now i want to show content of my first div when the page loads itself. in reference with code below when my page loads it should show the content of LTE .

<div id="lte" class="content_main">
    <h1> lte</h1>
</div>

<div id="device_details" class="content_main">
    <h1> device details</h1>
</div>


<div id="self_care" class="content_main">
    <h1>selfcare</h1>
</div>

Answer 1

Try this:

$(document).ready(function(){
    $("#device_details").hide();
    $("#self_care").hide();
});

jsfiddle

Answer 2

Just hide the other elements with CSS:

#device_details, 
#self_care {
  display:none;
}

Then to show in the future use display:block; or with jQuery:

$('#device_details', '#self_care')show();

Answer 3

try out this..

<div id="lte" class="content_main">
    <h1> lte</h1>
</div>

<div id="device_details" class="content_main" style="display:none;">
    <h1> device details</h1>
</div>


<div id="self_care" class="content_main" style="display:none;">
    <h1>selfcare</h1>
</div>

or you can do javascrip code like this..

$(document).ready(function(){
    $("#device_details").hide();
    $("#self_care").hide();
});

Answer 4

Try to use CSS not JavaScript.

.content_main {
  display: none;
}
.content_main:first-child {
  display: block;
}