title: li toggle visibility of active class
body: <p>I have a small script that I am trying to toggle the visibility of list items with an active class. The script itself is working, but I am having a bit of an issue conceptualizing how to always have the visible item at the top.</p>
  
  <p>Basically, I would like the active item to show at the top, and other non-active li elements should disappear. How do I achieve this?</p>
  
  <p>Here is what I have so far:</p>
  
  <p><strong><a href="https://jsfiddle.net/353t69c6/1/" rel="nofollow">fiddle</a></strong></p>
  
  <p>html:</p>
  
  <pre><code>&lt;ul class="list-group"&gt;
      &lt;li class="list-group-item active"&gt;test 1&lt;/li&gt;
      &lt;li class="list-group-item"&gt;test 2&lt;/li&gt;
      &lt;li class="list-group-item"&gt;test 3&lt;/li&gt;
      &lt;li class="list-group-item"&gt;test 4&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;button class="next btn btn-primary"&gt;Click&lt;/button&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.list-group-item {
      border-radius: 0 !important;
      visibility: hidden;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  }
  
  .list-group-item.active {
      visibility: visible;
  }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('.next').click(function() {
      $('.list-group-item.active').next().addClass('active');
      $('.list-group-item.active').prev().removeClass('active');
  });
  </code></pre>