jQuery accordion closed on page load

canciller · January 29, 2014, 10:08am

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



<!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>

James_Hibbard · January 29, 2014, 2:37pm

Hi there,

Welcome to the forums

Could you post a link to a page I can see this on?
The reason being we need to see what is in the files and “jquery.easing.1.3.js” and “accordion.js”

canciller · January 30, 2014, 8:52pm

Hello Pullo, thank you very much for your response…

the link is:

http://colegiodenutricionistascr.net

It is a concrete5 CMS website.

Hopefully you will know whats goin on.

Mittineague · January 30, 2014, 11:22pm

There are a couple errors you could try fixing to see if that helps

Especially try fixing

Line 229, Column 43: Stray end tag span.

&lt;li&gt;&lt;a href="#"&gt;Galería de Fotos&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

James_Hibbard · January 31, 2014, 7:59am

Thanks for the link - that helped.

On closer inspection, it seems that you are specifying the class of “active” in your accordion initialization block, as the class name to be applied to the open pannel.

jQuery().ready(function(){
  jQuery('.accordion').accordion({
    active: '.active',
    selectedClass: 'active',
    header: "dt"
  })
});

Then in your HTML you have:

<dt class="acc active bgr-5">Incorporaci&oacute;n</dt>

and

<dt class="acc active bgr-6">Fiscal&iacute;a</dt>

Remove the class “active” from both of these elements and the accordion will initialize in its shut state.

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="http://colegiodenutricionistascr.net/" />
  <meta charset="utf-8">
  <title>Colegio de Nutricionistas :: Inicio</title>
  <link rel="stylesheet" href="/themes/medical_template/css/style.css" type="text/css" media="screen">
  <script type="text/javascript" src="/concrete/js/jquery.js?v=29a81b1336beefc12003c86ebb880498"></script>
  <script src="/themes/medical_template/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="/themes/medical_template/js/accordion.js" type="text/javascript"></script>
</head>

<body id="page1">
    <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">Incorporaci&oacute;n</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>

  <script type="text/javascript">
    jQuery().ready(function(){
      jQuery('.accordion').accordion({
        active: '.active',
        selectedClass: 'active',
        header: "dt"
      })
    });
  </script>
</body>
</html>

canciller · January 31, 2014, 5:23pm

Thank you Pullo … the class that solve the problem. It was driven me crazy.

I will put extra attention to html validator details next time also.

Thanks for the big lesson on debug101.