jQuery - Show first div as default on page load

Question

This is my HTML code:

<!-- Unordered list - navigation -->
<ul id="linkwrapper">
   <li><a id="link1" href="#">link1</a></li>
   <li><a id="link2" href="#">link2</a></li>
   <li><a id="link3" href="#">link3</a></li>
</ul>

<!-- Hidden Elements-->
<div id="infocontent">
   <div id="link1content">Information about 1.</div>
   <div id="link2content">Information about 2.</div>
   <div id="link3content">Information about 3.</div>
</div>

JQuery :

$(document).ready(function(){

var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs

$('#linkwrapper a').click(function(){
    var $contentDiv = $("#" + this.id + "content");

    if($contentDiv.is(":visible")) {
        $contentDiv.hide(); // Hide Div
    } else {            
        $allContentDivs.hide(); // Hide All Divs
        $contentDiv.show(); // Show Div
    }

    return false;        
  });
});

When add about code to load in page. i want to show up first link already click as load the script. It means "Information about 1." visible in page load. how can i do it.

Example here JS Fiddle

Answer 1

Updated your JSfiddle. Check that. You can do this without JQuery too.

$(document).ready(function(){

var $allContentDivs = $('#infocontent div') // Hide All Content Divs

$('#linkwrapper li a').click(function(){
    var $contentDiv = $("#" + this.id + "content");

    if($contentDiv.is(":visible")) {
        $contentDiv.hide(); // Hide Div
    } else {            
        $allContentDivs.hide(); // Hide All Divs
        $contentDiv.show(); // Show Div
    }

    return false;        
  });
});

Your CSS

.hide{
   display:none;
}
 .show{
  display:inline
}

Your HTML:

 <!-- Unordered list - navigation -->

 <ul id="linkwrapper">
    <li><a id="link1" class="show" href="#">link1</a></li>
    <li><a id="link2"  href="#">link2</a></li>
    <li><a id="link3"  href="#">link3</a></li>
</ul>

 <!-- Hidden Elements-->
 <div id="infocontent">
   <div id="link1content" class="show">Information about 1.</div>
   <div id="link2content" class="hide">Information about 2.</div>
   <div id="link3content" class="hide">Information about 3.</div>
</div>

Answer 2

You could achieve it by updating your selector

   var $allContentDivs = $('#infocontent div:not(:first-child)').hide();

and initiating again the $allContentDivs inside your click event

$allContentDivs = $('#infocontent div');

Answer 3

Try this : hide all dive except first using following code

$('#infocontent div:not(:first)').hide();//hide all but first
var $allContentDivs = $('#infocontent div');//get all divs 

JSfiddle Demo

Answer 4

只需添加.not（'：first'）就可以了：

var $allContentDivs = $('#infocontent div').not(':first').hide();

Answer 5

var $allContentDivs = $('#infocontent div').hide();

$( "#infocontent div" ).first().show();

Answer 6

How about you show the first div after hiding all?

Like this:

$('#infocontent div').first().show();

Answer 7

DEMO

$(document).ready(function(){

    var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs

    $('#linkwrapper a').click(function(){
        var $contentDiv = $("#" + this.id + "content");

        if($contentDiv.is(":visible")) {
            $contentDiv.hide(); // Hide Div
        } else {            
            $allContentDivs.hide(); // Hide All Divs
            $contentDiv.show(); // Show Div
        }

        return false;        
    });

    $('#linkwrapper a').eq(0).click();//manually click the first anchor using .eq()
});

Hide everything and have a manual click on the first link so that it will show