Changing icon when clicked on my accordion slide effect

Question

I have a little problem on my accordion icon. When getting collapse it should be displayed "+" and this should toggle to "-". The current script it works fine when clicking toggle on each div but when the first div body getting expand and when you clicked another div, the icon "+" should be "-". In other words, when the body expand, the icon should be "-" and when collapse the icon should be "+".

$('body').on('click', 'div.title', function () {
  $(this).addClass('active').next().slideUp('normal');          
  var nextDiv = $(this).next();      
  var divBody = $('div.body-content');
  var divTitle = $('div.title');
  if(divBody.is(':visible')) {        
    $(divBody).prev().removeClass('active');        
  }
  if((nextDiv.is(divBody)) && (!nextDiv.is(':visible'))) { 
    $(divBody).slideUp('normal');
    nextDiv.slideDown('normal');
  }
});

div.title {
  width: 150px;
  border: 2px solid black;
  padding: 10px;
  margin-bottom: 10px;
}

div.body-content {
  display: none;
  width: 150px;
  margin: 0 10px 10px;
}

div.title:after {
  content: '+';
  float: right;
}

div.title.active:after {
  content: '-';
  float: right;
}

<div>         
  <div class="title">Accordion Header 1</div> 
  <div class="body-content">  
    <div>Accordion content 1a</div> 
    <div>Accordion content 1b</div>
    <div>Accordion content 1c</div>
  </div>
</div> 
<div>         
  <div class="title">Accordion Header 2</div>           
  <div class="body-content">  
    <div>Accordion content 2a</div> 
    <div>Accordion content 2b</div>
    <div>Accordion content 2c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 3</div>           
  <div class="body-content">  
    <div>Accordion content 3a</div> 
    <div>Accordion content 3b</div>
    <div>Accordion content 3c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 4</div>           
  <div class="body-content">  
    <div>Accordion content 4a</div> 
    <div>Accordion content 4b</div>
    <div>Accordion content 4c</div>
  </div>
</div>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

Answer 1

Almost there, missing just $(this).addClass('active'); inside the last condition, which will give the minus to the last clicked one:

$('body').on('click', 'div.title', function () {
  $(this).addClass('active').next().slideUp('normal');          
  var nextDiv = $(this).next();      
  var divBody = $('div.body-content');
  var divTitle = $('div.title');
  if(divBody.is(':visible')) {
    $(divBody).prev().removeClass('active');
  }
  if((nextDiv.is(divBody)) && (!nextDiv.is(':visible'))) {
    $(this).addClass('active'); /* added */
    $(divBody).slideUp('normal');
    nextDiv.slideDown('normal');
  }
});

div.title {
  width: 150px;
  border: 2px solid black;
  padding: 10px;
  margin-bottom: 10px;
}

div.body-content {
  display: none;
  width: 150px;
  margin: 0 10px 10px;
}

div.title:after {
  content: '+';
  float: right;
}

div.title.active:after {
  content: '-';
  float: right;
}

<div>         
  <div class="title">Accordion Header 1</div> 
  <div class="body-content">  
    <div>Accordion content 1a</div> 
    <div>Accordion content 1b</div>
    <div>Accordion content 1c</div>
  </div>
</div> 
<div>         
  <div class="title">Accordion Header 2</div>           
  <div class="body-content">  
    <div>Accordion content 2a</div> 
    <div>Accordion content 2b</div>
    <div>Accordion content 2c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 3</div>           
  <div class="body-content">  
    <div>Accordion content 3a</div> 
    <div>Accordion content 3b</div>
    <div>Accordion content 3c</div>
  </div>
</div>
<div>         
  <div class="title">Accordion Header 4</div>           
  <div class="body-content">  
    <div>Accordion content 4a</div> 
    <div>Accordion content 4b</div>
    <div>Accordion content 4c</div>
  </div>
</div>

<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

Answer 2

$('body').on('click','.title', function () {
      $('.title').removeClass('active'); 
      $(this).addClass('active');
      $(this).next().slideUp('normal');   
      
      var nextDiv = $(this).next();      
      var divBody = $('.body-content');
      var divTitle = $('.title');
     
      
      if((nextDiv.is(divBody)) && (!nextDiv.is(':visible'))) { 
        $(divBody).slideUp('normal');
        nextDiv.slideDown('normal');
      }
    }); 

 .title {
        width: 150px;
        border: 2px solid black;
        padding: 10px;
        margin-bottom: 10px;
    }
    div.body-content {
        display:none;
        width: 150px;
       margin: 0 10px 10px;
    }
    
    .title:after {
      content:'+';
      float:right;
    }
    
   
    .title.active:after {
      content:'-';
      float:right;
    }

    <div>         
      <div class="title">Accordion Header 1</div> 
      <div class="body-content">  
          <div>Accordion content 1a</div> 
          <div>Accordion content 1b</div>
          <div>Accordion content 1c</div>
      </div>
    </div> 
    <div>         
      <div class="title">Accordion Header 2</div>           
      <div class="body-content">  
          <div>Accordion content 2a</div> 
          <div>Accordion content 2b</div>
          <div>Accordion content 2c</div>
      </div>
    </div>
    <div>         
      <div class="title">Accordion Header 3</div>           
      <div class="body-content">  
          <div>Accordion content 3a</div> 
          <div>Accordion content 3b</div>
          <div>Accordion content 3c</div>
      </div>
    </div>
    <div>         
      <div class="title">Accordion Header 4</div>           
      <div class="body-content">  
          <div>Accordion content 4a</div> 
          <div>Accordion content 4b</div>
          <div>Accordion content 4c</div>
      </div>
    </div>


<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>