JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="kategori-cerceve">
  <ul id="kategoriler">
    <li class="ustKategori">Pet Shop <i class="fa fa-chevron-down"></i>
        <ul class="altKategori">
		<li><a class="">At</a></li>
		<li><a class="">Eşek</a></li>
            <li><a class="">Dana</a></li>
		</ul>
    </li>
    <li class="ustKategori">Kozmetik <i class="fa fa-chevron-down"></i>
		<ul class="altKategori">
		<li><a class="">At</a></li>
		<li><a class="">At</a></li>
		</ul>
	</li>
    <li class="ustKategori">Aksesuar <i class="fa fa-chevron-down"></i>
	<ul class="altKategori">
		<li><a class="">At</a></li>
		<li><a class="">At</a></li>
		</ul>
	</li>
	 <li class="ustKategori">Aksesuar <i class="fa fa-chevron-down"></i>
	<ul class="altKategori">
		<li><a class="">At</a></li>
		<li><a class="">At</a></li>
		</ul>
	</li>
	 <li class="ustKategori">Aksesuar <i class="fa fa-chevron-down"></i>
	<ul class="altKategori">
		<li><a class="">At</a></li>
		<li><a class="">At</a></li>
		</ul>
	</li>
</ul>
  </div>

CSS

.kategori-cerceve{
float: left;
width: 100%;
background-color: white;
max-height: 300px;
margin: 0 1.33% 10px 0.33%;
}

#kategoriler{
list-style: none;
margin:0;
padding:10px;
}
.altKategori{
list-style: none;
}
.altKategori a{
font-weight: 300;    
color: #2b2d2e;
}
.ustKategori{
border-bottom: 1px solid #6bb9f0;
}
.ustKategori i{
opacity: 0.6;
color: #6bb9f0;
margin-left: 40%;
}

JavaScript

$(".altKategori").hide();
$( ".ustKategori" ).click(function() {
  $( ".altKategori", this ).slideToggle( "slow" );
	if ($(".altKategori:visible").size() > 0){
  $("i", this).removeClass('fa-chevron-down').addClass('fa-chevron-up');}
    else{
    $("i", this).removeClass('fa-chevron-up').addClass('fa-chevron-down');
    }

});