CodePen

HTML

            
              <ul>
  <li id="id-1">nr 1</li>
  <li id="id-2">nr 2</li>
  <li id="id-3">nr 3</li>
</ul>
<div class="arter-all">
  <div id="xx-id-1">nr. 1</div>
  <div id="xx-id-2">nr. 2</div>
  <div id="xx-id-3">nr. 3</div>
</div>

            
          
!
via HTML Inspector

CSS

            
              

.active-animal {
  color: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.arter-all div').hide();

$('li').click(function() {
  var elementClassName = $(this).attr('id');
  $('.arter-all > div').not('div#xx-'+elementClassName).hide();
  $('div#xx-'+elementClassName).slideToggle(); 
  
});

$("li").click(function(){
  varclass = $(this).attr('class');
  $('li'+varclass).removeClass();
  $(this).toggleClass('active-animal');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................