NEN Accordion

by mrjordy

HTML

<ul class="accordion">
  <li class="outside moreplus" id = "item1Hov">
    x047AA Software Testing and Packaging - Simple
    <ul>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AA Software Testing and Packaging - Simple</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AA Software Testing and Packaging - Simple + x047AF Supplemental Scripts</li></a>
    </ul>
  </li>
  <li class="outside moreplus" id = "item2Hov">
    x047AB Software - Complex
    <ul>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex &amp; x047AC Supplemental Data</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex &amp; x047AC Supplemental Data &amp; x047AD Configuration Data</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex &amp; x047AC Supplemental Data &amp; x047AF Supplemental Data</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex &amp; x047AC Supplemental Data &amp; x047AD Configuration Data &amp; x047AF Supplemental Data</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex &amp; x047AD Configuration Data</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software – Complex &amp; x047AD Configuration Data &amp; x047AF Supplemental Data</li></a>
      <a href="http://www.google.com" class = "NoStyle"><li class="inside">x047AB Software - Complex &amp; x047AF Supplemental Data</li></a>

    </ul>
  </li>
  <a href="http://www.google.com" class = "NoStyle"><li class="outside" id = "item3Hov">
    x047AE Software Tier Moves
    </li></a>
  <a href="http://www.google.com" class = "NoStyle"><li...

CSS

ul.accordion {
  max-width: 800px;
  padding: 0;
}

ul.accordion ul {
  display: none;
}

li.inside, li.outside {
  border-radius: 2px;
  font-weight: bold;
  font-family: kalinga;
  color: white;
  list-style-type: none;
  text-shadow: rgba(0, 0, 0, .75) 0 0 2px;
}

li.outside:hover {
  padding-left: 14px;
}

li.outside {
  cursor: pointer;
  background: #3E628F;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid #fff;
  box-shadow: 2px 2px 0px #ddd;
  font-size: 16px;
  transition: .15s;
}

li.moreplus:before {
  content: '+';
  position: absolute;
  left: 0;
  margin-top: -26px;
  color: rgb(255, 165, 111);
  font-size: 30px;
  height: 8px;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  transform-origin: 9px 22px;
  transition: .25s;
}
li.moreplus:hover:before {
  color: white;
  text-shadow: -1px -1px 0 #7BA2D2, 1px -1px 0 #7BA2D2, -1px 1px 0 #7BA2D2, 1px 1px 0 #7BA2D2;
}
li.moreminus {
 padding-left: 10px !important;
}
li.moreminus:before {
 transform: rotate(45deg);
}

li.inside {
    background: #819cbe;
    list-style-type: none;
    padding: 5px 10px;
    margin-top: 2px;
    border: 1px solid #c6e1ff;
    transition: .1s;
    font-size: 14px;
    margin-left: -40px;
    transition: .1s;
}

li.inside:hover {
  background: #598bbe;
}
.Opacity85 {
  opacity: .85;
}
.NoStyle {
  text-decoration: none;
}

JavaScript

$('li.outside').click(function() {
  $(this).find('>ul').slideToggle(200);
  $(this).toggleClass("moreminus");
});
$('#item1Hov').hover(function() {
  $('#item2Hov, #item3Hov, #item4Hov').toggleClass("Opacity85");
});
$('#item2Hov').hover(function() {
  $('#item1Hov, #item3Hov, #item4Hov').toggleClass("Opacity85");
});
$('#item3Hov').hover(function() {
  $('#item1Hov, #item2Hov, #item4Hov').toggleClass("Opacity85");
});
$('#item4Hov').hover(function() {
  $('#item1Hov, #item2Hov, #item3Hov').toggleClass("Opacity85");
});