SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery accordion closed on page load

    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>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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"

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,161
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    There are a couple errors you could try fixing to see if that helps
    http://validator.w3.org/check?uri=ht...Inline&group=0
    Especially try fixing
    Line 229, Column 43: Stray end tag span.

    <li><a href="#">Galera de Fotos</span></a></li>

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

    Code:
    jQuery().ready(function(){
      jQuery('.accordion').accordion({
        active: '.active',
        selectedClass: 'active',
        header: "dt"
      })
    });
    Then in your HTML you have:

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

    Code:
    <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.

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

  6. #6
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •