How make switcher without toggleClass

Question

I trying to make something like hamburger and i wanna in first click at hamburger set css(plus symbol), but in second click remove css, that I set in first click(minus symbol)(wanna make something like switcher).I tried to use toogle jquery-function, but it doesn't work, instead my .panel-title disappeared. How i can make switcher, without toogleClass and making additional class? All wanna to do it is change plus to minus and minus to plus like switcher, when click at collapse panel

$(function() {

  $(".panel-title").click(function() {
    $('.panel-title button span:first-of-type').css({"top": "50%", "bottom": "50%"})
  });

});

.panel-heading {
    cursor: pointer;
    transition: color .15s ease-in-out;
}

.panel-heading:hover {
    color: #5bb8e1;
}

.panel-heading h4 {
    font-weight: 400;
}

.panel-title {
    position: relative;
}

.panel-title button {
    background: transparent;
    width: 22px;
    height: 22px;
    border: 0;
    position: relative;
    float: right;
}

.panel-title button span {
    content: '';
    transition: .3s linear;
    position: absolute;
    background: #b9b9b9;
}

.panel-title button span:first-of-type {
    top: 25%;
    bottom: 25%;
    width: 5%;
    left: 48%;
}

.panel-title button span:last-of-type {
    left: 25%;
    right: 25%;
    height: 5%;
    top: 48%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-group">
  <div class="panel panel-default">
    <div data-toggle="collapse" href="#collapse1" class="panel-heading">
      <h4 class="panel-title">
        Job Type
        <button>
          <span></span>
          <span></span>
        </button>
      </h4>
    </div>
    <div id="collapse1"class="panel-collapse collapse">
      <div class="panel-body">
        <ul>
          <li><input id="job-types-1"type="checkbox"><label for="job-types-1">Full-time</label></li>
          <li><input id="job-types-2"type="checkbox"><label for="job-types-2">Contract</label></li>
          <li><input id="job-types-3"type="checkbox"><label for="job-types-3">Part-time</label></li>
          <li><input id="job-types-4"type="checkbox"><label for="job-types-4">Freelance</label></li>
          <li><input id="job-types-5"type="checkbox"><label for="job-types-5">Internship</label></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

Don't use javascript. Simply key your styles off of the collapsed class being added to the parent:

.panel-heading {
    cursor: pointer;
    transition: color .15s ease-in-out;
}

.panel-heading:hover {
    color: #5bb8e1;
}

.panel-heading h4 {
    font-weight: 400;
}

.panel-title {
    position: relative;
}

.panel-title button {
    background: transparent;
    width: 22px;
    height: 22px;
    border: 0;
    position: relative;
    float: right;
}


.panel-title button span {
    content: '';
    transition: .3s linear;
    position: absolute;
    background: #b9b9b9;
}

.panel-title button span:first-of-type {
    top: 25%;
    bottom: 25%;
    width: 5%;
    left: 48%;
}

.panel-title button span:last-of-type {
    left: 25%;
    right: 25%;
    height: 5%;
    top: 48%;
}

.panel-heading:not(.collapsed) .panel-title button span:first-of-type,
.panel-title button:hover span:first-of-type {
    top: 50%;
    bottom: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-group">
  <div class="panel panel-default">
    <div data-toggle="collapse" href="#collapse1" class="panel-heading">
      <h4 class="panel-title">
        Job Type
        <button>
          <span></span>
          <span></span>
        </button>
      </h4>
    </div>
    <div id="collapse1"class="panel-collapse collapse">
      <div class="panel-body">
        <ul>
          <li><input id="job-types-1"type="checkbox"><label for="job-types-1">Full-time</label></li>
          <li><input id="job-types-2"type="checkbox"><label for="job-types-2">Contract</label></li>
          <li><input id="job-types-3"type="checkbox"><label for="job-types-3">Part-time</label></li>
          <li><input id="job-types-4"type="checkbox"><label for="job-types-4">Freelance</label></li>
          <li><input id="job-types-5"type="checkbox"><label for="job-types-5">Internship</label></li>
        </ul>
      </div>
    </div>
  </div>
</div>