Accordion Menu Issue

• 

  celinehalpin · Member · Jun 6, 2013 at 10:33 pm

  • Copy link
  • Add topic to favorites

  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.

  The blog I need help with is: (visible only to logged in users)

• 

  supportbot · Member · Jun 6, 2013 at 10:33 pm

  • Copy link

  The blog you specified at http://www.morrocanoilinfo.com does not appear to be hosted at WordPress.com.

  This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

  If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

  If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

  This is an automated message.

• 

  celinehalpin · Member · Jun 6, 2013 at 10:37 pm

  • Copy link

  I didn’t mean to post this post on wordpress.com…

  Please ignore/delete.