live sample in bl.ocks.org

There are some tips in this sample.

• CSS: nth-child and it's ranging
• CSS: transition opacity and top properties. (I tested with display property, too)
• CSS: override nth-child properties by :not() peseudo attribute. (specifiticy)
• javascript: scroll to element.
• javascript: forEach on Array-like object.

Hints

Thank you experts in internet!

• nth-child by StackOverflow nth-child by nthmaster
• nth-child specificitify by StackOverflow
• forEach
• animation with display:none

HTML

<ul>
  <li>1.</li>
  <li>2.</li>
  <li>3.</li>
  <li>4.</li>
  <li>5.</li>
  <li>6.</li>
</ul>
<div id="btn" onclick="javascript:openbtn();">open...</div>

javascript

    function toggle_show(i) {
        // type: (HTMLElement)
        if (i.classList.contains("show")) {
            i.classList.remove("show");
        } else {
            i.classList.add("show");
        }
    }
    
    function openbtn(ev) {
        var i = document.getElementById("btn");
        toggle_show(i);
        var seq = document.getElementsByTagName("li");
        Array.forEach(seq, toggle_show);
        i.scrollIntoView(false);
    }

CSS

      #btn {
        position: relative;
        border: 3px solid #000;
        border-radius: 1em;
        text-align: center;
        transition: all 2s ease 0s;
        top: -3em;
      }
      #btn.show {
        top: 0em;
      }
      li:nth-child(n+3):nth-child(-n+5) {
        opacity: 0.2;
      }
      li:nth-child(n+5) {
        opacity: 0.0;
        display: none;
      }
      li.show:nth-child(n+3):not(:disabled) {
        display: block;
        opacity: 1.0;
        animation: show 1s linear 0s;
      }

      @keyframes show {
          from {opacity: 0;}
          to {opacity: 1;}
      }