JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<script src="/js/scriptbreaker-multiple-accordion-1.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<style>
.rotate{
	transform: rotate(180deg);
    margin-top: 7px;
}
</style>


<ul style="padding: 0;list-style-type: none; width:100%" id="nav">
  <li class="ui-state-default" ordem="<?=$i+1?>" id="projeto_1"> 
    <a style="text-align: left;" href="#">
				<b> Projeto 1 (Apenas ao clicar aqui, é que a seta deveria de alterar ) </b>
				<i id="rotate_1" style="float:right" class="fa fa-arrow-down" aria-hidden="true"></i>			 		
     </a>
    <ul style="padding: 0;">
      <p style="height:50px; margin:0">
        Teste (Ao clicar aqui a seta nao devia de altarer, nao deveria de fazer o rotate )
      </p>
    </ul>
    
	</li>
 </ul>
 
 
 
 <script>
 			$(function(){
												$("#projeto_1").click(function(){
													console.log("#rotate_1");
													$("#rotate_1").toggleClass("rotate");
												});
											});
 </script>

CSS

#nav {
  display: block;
  width: 280px;
  margin: 0 auto;
  -webkit-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
  -moz-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
  box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
}
 
#nav > li > a {
  display: block;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: bold;
  color: #14597C;
  text-decoration: none;
  border-bottom: 1px solid white;
  background-color: #D0DBE5;
}
#nav > li > a:hover, #nav > li > a.open {
    color: #e9e9e9;
    border-bottom-color: #384f76;
    background-color: #14597c;
}

#nav li ul { display: none; background: #4a5b78; }
 
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: bold;
  color: #e3e7f1;
  text-shadow: 1px 1px 0px #000;
}
#nav li ul li a:hover {
  background: #394963;
}

JavaScript

$(document).ready(function(){
		$("#nav > li > a").on("click", function(e){
			if($(this).parent().has("ul")) {
			  e.preventDefault();
			}
			
			if(!$(this).hasClass("open")) {
				
				$(this).next("ul").slideDown(350);
				$(this).addClass("open");
				
			}else if($(this).hasClass("open")) {
				$(this).removeClass("open");
				$(this).next("ul").slideUp(350);
			}
		});
		
	});