How would I be able to have a <div> already collapsed when the page loads?

I have a JS Fidle with what I've got so far.

---

HTML

<button id="aa">Toggle it up</button>

<div id="test">TEST</div>

CSS

div { 
    background:#0F0; 
    margin:3px; 
    width:600px; 
    height:600px; 
    float:right;
}
div.test { 
    background:#345; 
    width:5px;
}
#aa {width: 100px; 
    height: 600px;
    position: absolute;
    top: 3px;
    right: 0px;
    z-index: 10 
    float: right;
}

JAVASCRIPT

$("#aa").click(function () {
    $("div").animate({width: 'toggle'});;
});

How would I be able to have a <div> already collapsed when the page loads?

I have a JS Fidle with what I've got so far.

---

HTML

<button id="aa">Toggle it up</button>

<div id="test">TEST</div>

CSS

div { 
    background:#0F0; 
    margin:3px; 
    width:600px; 
    height:600px; 
    float:right;
}
div.test { 
    background:#345; 
    width:5px;
}
#aa {width: 100px; 
    height: 600px;
    position: absolute;
    top: 3px;
    right: 0px;
    z-index: 10 
    float: right;
}

JAVASCRIPT

$("#aa").click(function () {
    $("div").animate({width: 'toggle'});;
});

• javascript
• jquery
• css
• onload

Share Follow edited Feb 11, 2014 at 13:12 Potherca 14.7k55 gold badges8484 silver badges106106 bronze badges asked Feb 11, 2014 at 12:51 user3297149user3297149 1311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

CSS

Hide the div using css

#test{
  display:none;
}

Fiddle Demo

---

jQuery

$('#test').hide();

---

JavaScript

document.getElementById('test').style.display = 'none';

CSS

#test{
  display:none;
}

DEMO