Simple Sliding Accordion

index.html

<h1>Simple Sliding Accordion</h1>
<ul>
  <li>
    <h2><a href="#" class="list1-toggle"><span class = "list1-icon"></span>First</a></h2>
    <ul class = "list1">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
  </li>
  <li>
    <h2><a href="#" class="list2-toggle"><span class = "list2-icon"></span>Second</a></h2>
    <ul class = "list2">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
  </li>
  <li>
    <h2><a href="#" class="list3-toggle"><span class = "list3-icon"></span>Thrid</a></h2>
    <ul class = "list3">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
  </li>
</ul>

script.js

$(document).ready(function(){
  
  $(".list2, .list3").hide();
  $(".list2-icon, .list3-icon").toggleClass("arrow-right");
  
  $(".list1-icon").toggleClass("arrow-down");
  
  function toggleSection(sectionChoice){
    var action = "." + sectionChoice + "-toggle";
    var icon = "." + sectionChoice + "-icon";
    var section = "." + sectionChoice;
    $(action).click(function(){ 
      $(icon).toggleClass("arrow-right");
      $(icon).toggleClass("arrow-down");
      $(section).slideToggle(); return false;
    });
  }
  
  toggleSection("list1"); toggleSection("list2"); toggleSection("list3");
});

Simple-Sliding-Accordion.markdown

Simple Sliding Accordion

A simple vertical accordion, it uses a bit of JQuery with help from some CSS triangles

A Pen by James Barnett on CodePen.

License.

style.css

/*reset*/li { list-style: none; }	ul { margin: 0; padding: 0;} a { text-decoration: none; }

body { margin: 30px auto; width: 500px;}
h1 { font-size: 1.5em; }

/*** Style Section Header ***/

h2 { 
  margin: 10px 20px;
  font-size: 1.25em;
}
h2 + ul { margin-left: 55px; }
h2 + ul > li { padding-bottom: 7px; }
h2, a:link, a:visited { color: #383838; }

/*************** Arrow Icons **************/

/* expand click target for toggle to include arrow icon */
[class*="icon"].arrow-down { margin-right: 12px; }
[class*="toggle"] { padding-left: 4px; }
.arrow-right { width: 20px; }

.arrow-right {
  display:inline-block;
  position: relative; 
  top: -2px;
  left: 0px;
  border-bottom: 9px solid transparent;
  border-top: 9px solid transparent;
  border-left: 9px solid #383838;
}

.arrow-down  {
  display:inline-block;
  position: relative; 
  top: -5px;
  left: -3px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #383838;
}