CSS doesn't work when closing the spry accordion

[tankske]

Hello,

I used a srpy accordion te create a menu. All goes fine untill i close one of my menu's. I think the css is than removed from the content tab and I wonder how I could resolve that.

On this link you can visit the website:
http://www.student.kuleuven.be/~s0169667/Home.html
If you click 'takken', the bar opens and everything goes fine. If you click it again, it closes but the CSS rule is removerd or something...

I know there are some more bugs, but I have changed them already on my laptop. I still need to upload them.

[djtonic]

I see what you mean, the menu text style changes on close.

can you post a bit of the code here that can help.

[tankske]

The code for my menu...

Code: Select all

<div id="Menu">
      <p>&nbsp;</p>
      <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="home.html">Home</a><br />
            -----------------------------</p>
  </div>
          <div class="AccordionPanelContent" style="display: block">
            <ul>
              <li><a href="Kalender.html">Kalender</a></li>
              <li><a href="Sitemap.html">Sitemap</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="joris.html">Sint Joris</a><br />
          -----------------------------</div>
          <div class="AccordionPanelContent" style="display: none">
            <ul>
              <li><a href="Historiek.html">Historiek</a></li>
              <li><a href="Jaarthema.html">Jaarthema</a></li>
              <li><a href="Totemisatie.html">Totemisatie</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="takken.html">Takken</a><br />
          ----------------------------- </div>
          <div class="AccordionPanelContent" style="display: none">
            <ul>
              <li><a href="Kapoenen.html">Kapoenen</a></li>
              <li><a href="Welpen.html">Welpen</a></li>
              <li><a href="Jvk.html">Jongverkenner</a></li>
              <li><a href="Vk.html">Verkenner</a></li>
              <li><a href="Jin.html">Jin</a></li>
              <li><a href="Vt.html">Vt</a></li>
              <li><a href="Leiding.html">Leiding</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="Drumband.html">Drumband</a><br />
          ----------------------------- </div>
          <div class="AccordionPanelContent" style="display: none">
            <ul>
              <li><a href="Algemeen.html">Algemeen</a></li>
              <li><a href="Geschiedenis.html">Geschiedenis</a></li>
              <li><a href="Contact.html">Contact</a></li>
              <li><a href="Optredens.html">Optredens</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="Media.html">Media</a><br />
          ----------------------------- </div>
          <div class="AccordionPanelContent" style="display: none">
            <ul>
              <li><a href="Fotoboek.html">Fotoboek</a></li>
              <li><a href="Maandprogramma.html">Maandprogramma</a></li>
              <li><a href="Downloads.html">Downloads</a></li>
              <li><a href="Kampverhalen.html">Kampverhalen</a></li>
              <li><a href="Gastenboek.html">Gastenboek</a></li>
            </ul>
          </div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab"><a href="Praktisch.html">Praktisch</a><br />
          ----------------------------- </div>
          <div class="AccordionPanelContent" style="display: none">
            <ul>
              <li><a href="Contact_Joris.html">Contact</a></li>
              <li><a href="Locatie.html">Locatie</a></li>
              <li><a href="Uniform.html">Uniform</a></li>
            </ul>
          </div>
        </div>
      </div>
      </div>

and my css file

Code: Select all

@charset "utf-8";
body {
   background-color: #4F6FB9;
   margin: 0px;
   padding: 0px;
}
#Achtergrond_banner {
   background-color: #FEDE49;
}
#Banner {
   height: 50px;
   background-color: #FED101;
   font-family: "Comic Sans MS", cursive;
   font-size: 24px;
   color: #233357;
   text-align: right;
   width: 750px;
   position: relative;
   margin: auto;
   vertical-align: top;
   padding-top: 30px;
   padding-right: 50px;
   background-repeat: no-repeat;
}
#Achtergrond_Main {
   background-image: url(../images/Achtergrond_sjabloon.png);
}


#Main {
   color: #fff200;
   background-color: #233357;
   width: 800px;
   height: 700px;
   padding-top: 50px;
   margin: auto;
}
#Menu {
   width: 200px;
   padding-right: 30px;
   padding-left: 10px;
   height: 660px;
   background-repeat: no-repeat;
   background-image: url(../images/logo_padvinders.png);
   background-position: right 500px;
   position: absolute;
   clear: left;
   float: left;
}



#Menu .AccordionPanelTab a:link {
   font-weight: bold;
   text-decoration: none;
   color: #FFF200;
}

#Menu .AccordionPanelTab a:visited {
   font-weight: bold;
   color: #FFF200;
   text-decoration: none;
}
#Inhoud {
   background-image: url(../images/inhoud_achtergrond.png);
   background-repeat: no-repeat;
   height: 440px;
   width: 500px;
   margin-left: 260px;
   padding-right: 25px;
   padding-left: 10px;
   padding-top: 0px;
   padding-bottom: 10px;
   text-align: justify;
   overflow: auto;
   list-style-image: url(../images/logo_scouts.png);
}
#Inhoud table tr {
   vertical-align: middle;
   text-align: left;
   padding-top: 5px;
   padding-bottom: 5px;
}
#Inhoud div ul li {
   vertical-align: top;
}
#Inhoud #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent {
   background-color: #233357;
}

#Inhoud ul {
   list-style-position: inside;
}
#Inhoud a:link {
   font-weight: bolder;
   color: #FFF;
   text-decoration: underline;
}
#Inhoud a:visited {
   font-weight: bold;
   color: #FFF;
   text-decoration: underline;
}
#Achtergrond_footer {
   background-color: #fede49;
}

#Footer {
   height: 35px;
   background-color: #FED101;
   font-family: "Comic Sans MS", cursive;
   padding-top: 5px;
   padding-left: 50px;
   font-size: 12px;
   color: #233357;
   margin: auto;
   width: 750px;
   background-repeat: no-repeat;
}
#Links {
   margin-left: 270px;
   height: 200px;
   width: 150px;
   float: left;
   padding-top: 10px;
}

#Links a:link {
   font-weight: bolder;
   color: #FFF;
   text-decoration: underline;
}
#Links a:visited {
   font-weight: bold;
   color: #FFF;
   text-decoration: underline;
}
#Leiders {
   height: 200px;
   width: 350px;
   margin-left: 10px;
   float: left;
   padding-top: 10px;
}
.TabbedPanelsContent.TabbedPanelsContentVisible p a {
   color: #FFF;
   text-decoration: underline;
   font-weight: normal;
}

/**zero out default brower settings on everything**/
* {
   margin:0;
   padding:0;
   border:0;
   line-height: normal;
}
.tabelfoto {
   border: 1px solid #233357;
   background-color: #FED101;
   color: #233357;
   text-align: center;
}
.Link {
   font-weight: bolder;
   color: #FFF;
   text-decoration: underline;
}
.Foto {
   text-align: center;
}
.Word {
   font-weight: bold;
   color: #FFF;
}
.Accent {
   font-weight: bold;
   color: #FFF;
}
.scroll {
   overflow: scroll;
}