Accordian Panels: want all CLOSED

Question

The Accordian panels I've installed are lower down in the page body, just high enough to begin to see without scrolling down.  Would like visitors to immediately see there's a list of topics - having the first panel open to start with, defeats that goal.
Suggestions on how to have all accordian panels closed, initially?

Answer 1

Thanks Ben, but aside from the fact I never use Design View in Dreamweaver (shudder), more to the point I am building this page in Drupal CMS and therefore (after testing the "base model" locally) am implementing and refining the code directly inside a page editor in my Drupal website.  Here's the precise code I've typed in for the 2nd Accordian panel:
<code>
<div class="AccordionPanel">
    <div class="AccordionPanelTabBG">
        <div class="AccordionPanelTab">MARKETING</div>
        </div>
        <div class="AccordionPanelContent">
        <br>
Asgard Forge works with the Client to identify a clear consensus of what that company is and does, and shapes this into its Brand: a focused, concise, consistent Message about the Company.<br>
<br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   WE'LL ASSIST IN REFINING YOUR GOALS</span><br>
You may already know this cold – and then again it may help you sharpen your company focus;<br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   IDENTIFY COMPANY STRENGTHS & ASSETS</span><br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   DEFINE THE COMPANY PERSONALITY</span><br/>
<img src=/web-design/web-design-company/sites/all/themes/af_marketing/images/nodes/arrow-bulle t.gif align=absmiddle /><span style="color:#800101">   BUILD YOUR ONLINE BRAND</span>
<br>
Just because your company isn’t Nike or Apple, doesn’t mean you can’t take full advantage of having a brand that’s <strong>quickly recognized</strong> and <strong>enduringly remembered</strong>.
<br/><br/>
</div>
</div>
</code>
Again, for quick reference:http://www.asgardforge.com/web-design/web-design-company/new-client
As you can see, I've placed only two BR tags at the end of content in order to leave abit of padding there manually - and note the syntax.  When the page is viewed and you look at the page source, you see my 2 tags PLUS the 6 differently-syntaxed </br/> tags.
If however you know for certain it's not someting SPRY does in constructing Accordian panels (I'm sorry but I don't yet know what your use or affiliation with SPRY is), then I would have to conclude it's something that Drupal does.  Your confirmation on this point would be appreciated.
NOTE: As you can see in the above example, I've wrapped the AccordianPanelTab container inside another in order to maintain the Tab background all the way across while the + / - image to the left changes with toggle clicks.  That's the only place I've diverged from the standard Accordian structure, and here's the CSS for that container:
.AccordionPanelTabBG {
    background-image:url(SpryAssets/bg-accordian-panel.gif); background-repeat:repeat-x; background-position:top;
    line-height:27px;
    border-left:1px solid #ccc; border-right:1px solid #ccc;
    margin: 0px;