Expanding list on webpage
My solution relies on the CSS rule which says, "hide all list items that come after the one with the active class."

li.active ~ li {
  display: none;
}


The JavaScript deals with getting the index of the list item containing the active class and re-assigning the active class to the next list item (if there is one).



window.addEventListener("load", init);

var btn, list_length, ul;

function init() {
  ul = document.getElementsByTagName("ul")[0];  
  btn = document.getElementsByTagName("button")[0];
  list_length = ul.children.length;
  
  btn.addEventListener("click", function() {
    if (getItemIndex(getActiveItem()) &lt; (list_length -1)) {
      showNextItem();      
    }
  });
}

function getActiveItem() {
  return document.getElementsByClassName("active")[0];
}

function getItemIndex(active_item) {
  var nodeList = Array.prototype.slice.call(ul.children);
  
  return nodeList.indexOf(active_item);
}

function getListItem(index) {
  return document.getElementsByTagName("li")[index]; 
}

function showNextItem() {
  var active_item = getActiveItem(),
      next_index  = getItemIndex(active_item) + 1,
      next_item   = getListItem(next_index);
  
  active_item.classList.remove("active");
  next_item.classList.add("active");

  if ((next_index + 1) &lt; list_length) {  
    btn.getElementsByTagName("span")[0].innerHTML = getListItem(next_index + 1).innerHTML;    
  } else {
    btn.classList.add("hide");
  }
}
h1 {
  font-size: 1.2em;
}

button {
  font-size: 1em;
}

button.hide {
  display: none;
}

ul {
  margin: 0 0 1em;
  padding: 0;
  border-bottom: 1px solid gray;
  width: 40em;
}

li {
  list-style: none;
  padding: 0.8em 0;
  border-top: 1px solid gray;  
}

li.active ~ li {
  display: none;
}
&lt;h1&gt;Expanding List&lt;/h1&gt;

&lt;ul&gt;
  &lt;li class="active"&gt;part one&lt;/li&gt;
  &lt;li&gt;part two&lt;/li&gt;
  &lt;li&gt;part three&lt;/li&gt;
  &lt;li&gt;part four&lt;/li&gt;
&lt;/ul&gt;

&lt;button&gt;Show &lt;span&gt;part two&lt;/span&gt;
&lt;/button&gt;