Hello dear Sitepoints friends.

I was trying to set the default state of a jQuery accordion "closed" on page load but no luck.

I will be gratefull if someone can help me to solve this or point to a reference.

Here is a picture of the actual state and also the code

eg.jpg

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

/*--- accordion begin ---*/
.accordion {position:relative; z-index:999;
	padding:0px 0 0 0;
}

.bgr-1 {background:url(../images/marker-acc.png) top right no-repeat #7f1637;}
.bgr-2 {background:url(../images/marker-acc.png) top right no-repeat #047878;}
.bgr-3 {background:url(../images/marker-acc.png) top right no-repeat #ffb733;}
.bgr-4 {background:url(../images/marker-acc.png) top right no-repeat #f57336;}
.bgr-5 {background:url(../images/marker-acc.png) top right no-repeat #c22121;}
.bgr-6 {background:url(../images/marker-acc.png) top right no-repeat #49BDD6;}

	.accordion dt	{
		cursor:pointer;
		overflow:hidden;
		font-size:16px;
		line-height:1.2em;
		color:#fff;
		border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
		padding: 6px 0 10px 6px;
		margin-bottom:11px;
	}
	
	.accordion dt.active.bgr-1, .accordion dt.active.bgr-2, .accordion dt.active.bgr-3, .accordion dt.active.bgr-4, .accordion dt.active.bgr-5, .accordion dt:hover.bgr-1, .accordion dt:hover.bgr-2, .accordion dt:hover.bgr-3, .accordion dt:hover.bgr-4, .accordion dt:hover.bgr-5{
		color:#fff;
		background-position:bottom right;
	}
		.accordion dd {
		color:#fff;
		display:none;
		width:155px;
		overflow:hidden; /*important for accordeon*/
		text-transform:none;
		padding: 0px 9px 5px 30px;
		margin-bottom:0px;

	}
		.accordion dd a {
			text-decoration:none;
		}
		.accordion dd a:hover {
			text-decoration:none;
		}
		
.list-1 li {font-size:13px; line-height:26px; background:url(../images/pic-1.gif) 0 bottom repeat-x; padding-bottom:1px;}
.list-1 li.last {background:none;}
.list-1 li span {display:block; margin-top:-7px;}
.list-1 li a {color:#c22121; display:inline-block;  background:url(../images/marker-1.gif) 0 12px no-repeat; padding-left:10px;}
.list-1 li a:hover {color:#a0a0a0;}

.list-2 li {font-size:13px; line-height:26px; background:url(../images/pic-1.gif) 0 bottom repeat-x; padding-bottom:1px;}
.list-2 li.last {background:none;}
.list-2 li a {color:#7f1637; display:inline-block;  background:url(../images/marker-2.gif) 0 12px no-repeat; padding-left:10px;}
.list-2 li a:hover {color:#a0a0a0;}

.list-3 li {font-size:13px; line-height:26px; background:url(../images/pic-1.gif) 0 bottom repeat-x; padding-bottom:1px;}
.list-3 li.last {background:none;}
.list-3 li span {display:block; margin-top:-7px;}
.list-3 li a {color:#047878; display:inline-block;  background:url(../images/marker-3.gif) 0 12px no-repeat; padding-left:10px;}
.list-3 li a:hover {color:#a0a0a0;}

.list-4 li {font-size:13px; line-height:26px; background:url(../images/pic-1.gif) 0 bottom repeat-x; padding-bottom:1px;}
.list-4 li.last {background:none;}
.list-4 li span {display:block; margin-top:-7px;}
.list-4 li a {color:#d68f0d; display:inline-block;  background:url(../images/marker-4.gif) 0 12px no-repeat; padding-left:10px;}
.list-4 li a:hover {color:#a0a0a0;}

.list-5 li {font-size:13px; line-height:26px; background:url(../images/pic-1.gif) 0 bottom repeat-x; padding-bottom:1px;}
.list-5 li.last {background:none;}
.list-5 li span {display:block; margin-top:-7px;}
.list-5 li a {color:#f57336; display:inline-block;  background:url(../images/marker-5.gif) 0 12px no-repeat; padding-left:10px;}
.list-5 li a:hover {color:#a0a0a0;}

.list-6 li {font-size:13px; line-height:26px; background:url(../images/pic-1.gif) 0 bottom repeat-x; padding-bottom:1px;}
.list-6 li.last {background:none;}
.list-6 li span {display:block; margin-top:-7px;}
.list-6 li a {color:#f57336; display:inline-block;  background:url(../images/marker-6.gif) 0 12px no-repeat; padding-left:10px;}
.list-6 li a:hover {color:#a0a0a0;}

/*--- accordion end ---*/

</style>
    <script src="<?=$this->getThemePath()?>/js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="<?=$this->getThemePath()?>/js/accordion.js" type="text/javascript"></script>

<script>

$(document).ready(function(){
      $(".works-list a.tooltips").easyTooltip();
    });
    jQuery().ready(function(){
        jQuery('.accordion').accordion({
           active: '.active',
           selectedClass: 'active',
           header: "dt"
        })
      });

</script>
	
</head>
<body>

<dl class="accordion indent-bot">
                                          <dt class="acc bgr-1">Sobre el Colegio</dt>
                                          <dd>
                                             <ul class="list-2">
                                                  <li><a href="#">Qui&eacute;nes Somos</a></li>
                                                  <li><a href="#">Historia</a></li>
                                                  <li><a href="#">Misi&oacute;n &amp; Visi&oacute;n</a></li>
                                                  <li><a href="#">Objetivos</a></li>
                                              </ul>
                                          </dd>
                                          <dt class="acc bgr-2">Organos del Colegio</dt>
                                          <dd>
                                              <ul class="list-3">
                                                  <li><a href="#">Asamblea General</a></li>
                                                  <li><a href="#">Junta Directiva</a></li>
                                                  <li><a href="#">Fiscal&iacute;a</a></li>
                                                  <li><a href="#">Tribunal de Honor</a></li>
                                                  <li><a href="#">Tribunal Electoral</a></li>
                                                  <li><a href="#">Equipo Administrativo</a></li>
                                              </ul>
                                          </dd>
                                          <dt class="acc bgr-3">Colegiados</dt>
                                          <dd>
                                               <ul class="list-4">
                                                  <li><a href="#">Leyes y Reglamentos</a></li>
                                                  <li><a href="#">Informes de Junta Directiva</a></li>
                                                  <li><a href="#">Acuerdos</a></li>
                                                  <li><a href="#">Consultas</a></li>
                                                  <li><a href="#">Colegiados</a></li>
                                              </ul>
                                          </dd>
                                          <dt class="acc bgr-4">Tarifas</dt>
                                          <dd>
                                              <ul class="list-5">
                                                  <li><a href="#">Arancel Vigente</a></li>
                                                  <li><a href="#">Pago Colegiaturas</a></li>
                                              </ul>
                                          </dd>
                                          <dt class="acc active bgr-5">Incorporarse</dt>
                                          <dd style="display:block;">
                                             <ul class="list-1">
                                                  <li><a href="#">Primera vez</a></li>
                                                  <li><a href="#">Reincorporaci&oacute;n</a></li>
                                                  <li><a href="#">Desincorporaci&oacute;n</a></li>
                                              </ul>
                                          </dd>
                                          <dt class="acc active bgr-6">Fiscal&iacute;a</dt>
                                          <dd style="display:block;">
                                             <ul class="list-1">
                                                  <li><a href="#">Qu&eacute; y cu&aacute;ndo denunciar?</a></li>
                                                  <li><a href="#">Qui&eacute;nes denuncian?</a></li>
                                                  <li><a href="#">C&oacute;mo formalizar una denuncia?</a></li>
                                              </ul>
                                          </dd>
                                    </dl>

</body>

<script 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js

"></script>
<script>

your JS here

</script
</html>