Accordion JQuery doesn't work

It is my first time using jQuery. I have checked it many times. I don't know why it doesn't work. The result should be an accordion.

May somebody be able to notice why is it still stable? ;)

Solution

I don't know if this answer will satisfy you... Since the result is working but ugly.

You just had a couple typos:

A missing $ sign
.slideDown() without a capital
An extra } after the .addClass('active);
Seems like you were loading jQuery twice. Correctly in the <head> and before your script: <script src="bower_components/jquery/jquery.js"></script>. (so remove it).

I highly suggest you to use a code editor... If you do not already. It makes the code reviewing easier.

$(function() {
  $('.tab-panels .tabs li').on('click', function(){
    $('.tab-panels .tabs li.active').removeClass('active');
    $(this).addClass('active');
    var panelToShow = $(this).attr('rel');
    $('.tab-panels .panel.active').slideUp(300, showNextPanel);
    
    function showNextPanel(){
      $(this).removeClass('active');
      $('#'+panelToShow).slideDown(300, function () {
        $(this).addClass('active');
      });
    }
  });
});

ul {
list-style-type: none;
}
ul li {
  display: inline-block;
  padding: 25px;
  background-color: gray;
  border-radius: 20%;
  text-align: center;
  color: white;
}
.tab-panels .panel.active {
  display: block;
  width: 28%;
  text-align: center;
  padding: 20px 0 20px 0;
}
.tab-panels ul li:hover {
  background-color: black;
}
.tab-panels ul li:active {
  background-color: black;
}
.panel {
  display: none;
  background-color: yellow;
  height: 24%;
}

<html>
  
<head> 
  <title> task </title> 
  <link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  </head>
  <body>
    <div class="tab-panels">
      <ul class="tabs"> 
        <li class="active" rel="panel1">numer 1 </li>
        <li rel="panel2">numer 2 </li>
        <li rel="panel3">numer 3 </li>
        <li rel="panel4">numer 4 </li>
      </ul>
     
    <div class="panel active" id="panel1">
    raz</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel2">
    dwa</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel3">
    trzy</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
    <div class="panel" id="panel4">
    cztery</br>
    text</br>
    text</br>
    text</br>
  text</br>
    text</br>    
    </div>
</div>
 
  </body>
</html>