Accordion Menu Issue

[wealthpossible]

Hello everyone,

I’ve been formatting an accordion menu. I managed to get each menu item to open up to show all the content inside…no more and no less…just as I wanted it.

However, in the process the animation or transition of the menu opening has gone a bit askew.

You can see the menu here: http://www.morrocanoilinfo.com/treatments/pricelist/

This is where I got the code: http://www.developerdrive.com/2013/04/a-quick-and-simple-css3-accordion-menu/

Here is my current css:

@charset “utf-8”;
/* CSS Document */

#pageContentBox {
clear: both;
}
ol {
list-style: none;
text-align: left;
border: 1px solid #cccccc;
margin: 0px;
padding: 20px;
min-width: 150px;
max-width: 960px;
}

ol li {
height: 20px;
border-bottom: 1px solid #cccccc;
transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
overflow: hidden;
}

ol li:last-child {
border-bottom: 0px;
}

ol li:target {
height: auto;
}

ol li ol {
opacity: 0;
padding-left: 10px;
padding-right: 10px;
border: 0px;
max-width: 100%;
max-height: auto;
overflow-y: visible;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

ol li:target ol {
opacity: 1;
}
.listTitle {
padding: 10px;
font-weight: bold;
}
.listItem {
padding: 10px;
font-weight: bold;
}
.listInfo {
padding: 10px;
font-style: italic;
height: 100%;
font-size: 12px;
border-bottom: 1px solid black;
}
.treatmentTitle {
padding: 10px;
font-weight: bold;
font-size: 20px;
}
.alignleft {
float: left;
text-align: left;
width: 75%;
}
.alignright {
float: left;
text-align: right;
width: 25%;
}

How can I get the menu back to opening smoothly like this: http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/04/snippet-2.html#item-1

Thanks for reading.

[Author]

Posts