title: Transition effect on expanding UL
body: <p>How do i add a transition effect on this expanding list?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="outerBG"&gt; 
          &lt;div class="innerBG"&gt;
              &lt;h2 class="info"&gt;&amp;#10148; Show text&lt;/h2&gt;
              &lt;ul id="infoContent" style="display:none"&gt;
                  &lt;li&gt;TEST 1 TEST 1 TEST 1 TEST 1&lt;/li&gt;
                  &lt;li&gt;TEST 2 TEST 2 TEST 2 TEST 2&lt;/li&gt;              
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using JavaScript to toggle the UL's display:</p>
  
  <pre><code>function expand () {
      infoContent.style.display = infoContent.style.display === 'none' ? '' : 'none';
  }
  </code></pre>
  
  <p>Is it possible to make a transition effect out of this?</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/mqy2c80u/" rel="nofollow">https://jsfiddle.net/mqy2c80u/</a></p>