Collapsible Accordian (Useful for Sidebar Search)

HTML:
<div id="integration-list">
                    <form>
                        <ul>
                            <li>
                                <a class="expand">
                                    <div class="right-arrow">+</div>
                                    <h4>Budget</h4>
                                </a>
                                <div class="detail">
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Upto 3 Lakh
                                          </label>
                                    </div>
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            3-4 Lakh
                                          </label>
                                    </div>
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            4-6 Lakh
                                          </label>
                                    </div>
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            6-8 Lakh
                                          </label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a class="expand">
                                    <div class="right-arrow">+</div>
                                    <h4>Makes</h4>
                                </a>
                                <div class="detail">
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Maruti Suzuki
                                          </label>
                                    </div>
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Hyundai
                                          </label>
                                    </div>
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Honda
                                          </label>
                                    </div>
                                    <div class="checkbox">
                                          <label>
                                            <input type="checkbox" value="">
                                            Tata
                                          </label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
css:
#integration-list ul {
    padding: 0;
    color: #555;
}
#integration-list ul > li {
    list-style: none;
    border-top: 1px solid #ddd;
    display: block;
    padding: 15px;
    overflow: hidden;
}
#integration-list ul:last-child {
    border-bottom: 1px solid #ddd;
}
#integration-list ul > li:hover {
    background: #efefef;
}
.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer;
}
.detail {
    margin:25px 0 10px 0px;
    display: none;
}
.right-arrow {
    margin-top:-4px;
    margin-left: 20px;
    width: 10px;
    height: 100%;
    float: right;
    font-weight: bold;
    font-size: 20px;
}
.icon {
    height: 75px;
    width: 75px;
    float: left;
    margin: 0 15px 0 0;
}

js:
$(function() {
  $(".expand").on( "click", function() {
    $(this).next().slideToggle(100);
    $expand = $(this).find(">:first-child");
   
    if($expand.text() == "+") {
      $expand.text("-");
    } else {
      $expand.text("+");
    }
  });
});