How to toggle class between two element using jquery?

Use .toggleClass("active") of jquery and check the below snippet.

$(document).ready(function(){
  $("#toggel_class").on('click',function(){
    $("ul li").toggleClass("active");
  });
});

.active { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion one-open">
   <li class="active">
       <div class="title">Title 1</div>
       <div class="content">Content 1</div>
   </li>
   <li>
       <div class="title">Title 2</div>
       <div class="content">Content 2</div>
   </li>
</ul>
<button id="toggel_class">Toggle the content </button>

$("button").on("click", function() {
   $("li").toggleClass("active");
});

This toggles the class when the button is clicked: https://jsfiddle.net/mqhyLohe/

Try looking at JavaScript classList.toggle() (not compatible with IE9 and lower). Otherwise take a look at jQuery UI (if jQuery is the path you want to wander).

Check if it works

$(".accordion li").click(function(){
  $("li").removeClass('active');
  $(this).addClass('active');
});

you have to give your list an id

$("#item1").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active")
});

I too had faced the same problem. Solved it using icons. Please refer the answer here

This is what I had used before:

if($(this).text() == "-")  
{
  $(this).text("+");
  }
  else {
  $('#accordion .opener').text("+");
  $(this).text("-");
   }
 });