
var list        = document.getElementsByClassName("list"),
    items_shell = document.getElementsByClassName("list-items-shell"),
    selected    = "selected",
    list_anim   = 250;

// close all lists
function close_lists() {
  for (i = 0; i < list.length; i++) {
    items_shell[i].style.height = "0";
    list[i].classList.remove(selected);
  }
}

// return true if any lists are open
function is_any_list_open() {
  for (i = 0; i < list.length; i++) {
    if (list[i].classList.contains(selected)) {
      return true;
    }
  }
}

// open list
function set_list_height() {
  var list_items = document.getElementsByClassName("list-items");

  for (i = 0; i < list.length; i++) {
    if (list[i].classList.contains(selected)) {
      items_shell[i].style.height = list_items[i].offsetHeight + "px";
    }
  }
}

// scroll to selected list
function scroll_to_list(i) {
  setTimeout(function() {
    // get list y-position
    var elem_pos = items_shell[i].offsetTop;
    window.scrollTo(0, elem_pos);
  }, list_anim);
}

// toggle selected list
function toggle_list(i) {
  // if mobile
  if (window.innerWidth < 800) {
    // if selected list is closed & another list is open
    if (!list[i].classList.contains(selected) && is_any_list_open()) {
      close_lists();
      // wait for other list to close, then open selected list
      setTimeout(function() {
        list[i].classList.add(selected);
        set_list_height();
        // scroll to selected list
        scroll_to_list(i);
      }, list_anim);
    // if selected list is closed
    } else if (!list[i].classList.contains(selected)) {
      close_lists();
      // open selected list
      list[i].classList.add(selected);
      set_list_height();
      // scroll to selected list
      scroll_to_list(i);
    } else {
      // close selected list
      items_shell[i].style.height = "0";
      list[i].classList.remove(selected);
    }
  }
}

function smart_nav() {
  var main       = document.getElementsByTagName("main")[0],
      list_nav   = document.getElementsByClassName("list__nav")[0],
      top_frag   = document.getElementsByClassName("top-frag")[0],
      scroll_pos = document.body.scrollTop,
      nav_pos    = main.offsetTop;

  // fix list-nav if scrolled to/past it
  if (scroll_pos >= nav_pos) {
    // fix nav, show top frag
    list_nav.classList.add("fixed-nav");
    top_frag.classList.add("showing-frag");
  } else {
    // unfix nav, hide top frag
    list_nav.classList.remove("fixed-nav");
    top_frag.classList.remove("showing-frag");
  }

  // highlight nav item when scrolled to/past respective list
  for (i = 0; i < list.length; i++ ) {
    var nav_item = document.getElementsByClassName("nav-item"),
        list_pos = list[i].offsetTop;

    // -1 compensates for frag rounding bug
    scroll_pos >= nav_pos + list_pos - 1 ?
      nav_item[i].classList.add("current")
      :
      nav_item[i].classList.remove("current")
    ;
  }
}

// adjust height on font-size/padding change
window.addEventListener("resize", set_list_height);
window.addEventListener("resize", smart_nav);
window.addEventListener("scroll", smart_nav);

@@ -866,16 +866,43 @@
 st(i) %7B%0A
+  // wait for list to open%0A
   setTim
@@ -939,10 +939,12 @@
 ist 
-y-
+top 
 posi
@@ -993,16 +993,59 @@
 setTop;%0A
+    // scroll to top of list/to list title%0A
     wind
@@ -1090,16 +1090,286 @@
 im);%0A%7D%0A%0A
+// open selected list%0Afunction open_list(i) %7B%0A  // add class for animating open/close icon and list color%0A  list%5Bi%5D.classList.add(selected);%0A  // open list (set height so opening can be animated)%0A  set_list_height();%0A  // scroll to selected list%0A  scroll_to_list(i);%0A%7D%0A%0A
 // toggl
@@ -1582,24 +1582,55 @@
 t_open()) %7B%0A
+      // close that other list%0A
       close_
@@ -1679,33 +1679,8 @@
 lose
-, then open selected list
 %0A   
@@ -1718,184 +1718,108 @@
     
-list%5Bi%5D.classList.add(selected);%0A        set_list_height();%0A        // scroll to selected list%0A        scroll_to_list(i);%0A      %7D, list_anim);%0A    // if selected list is
+open_list(i)%0A      %7D, list_anim);%0A    // if selected list is closed (and all other lists are
  closed
+)
 %0A   
@@ -1881,36 +1881,30 @@
     
-close_lists();%0A 
+open_list(i)%0A
     
- 
 // 
-open
+if
  sel
@@ -1917,130 +1917,16 @@
 list
-%0A      list%5Bi%5D.classList.add(selected);%0A      set_list_height();%0A      // scroll to selected list%0A      scroll_to_list(i);
+ is open
 %0A   

refactor js