使用id无效的过滤切换

Question

我在max-width: 767出现了一个导航栏过滤器按钮。我有一个侧边栏，我想使用此按钮切换。我正在尝试使用id属性执行此操作。这是我的HTML：

<div class="col-xs-3 sidebar-offcanvas" id="sidebar">
    <div class="content_left"> 
        <span class="expand-collapse-text exp">
            <i class="fa fa-sort-desc"></i>  
        </span>
        <div class="left-title">Speciality</div>
        <div class="content-left1"> 
            <span class="expand-collapse-text exp"> 
                <i class="fa fa-sort-desc"></i>
            </span>
            <div class="left-title">Multi Speciality</div>
            <ul class="left_options list-unstyled">
                <li>
                    <input value="1" id="ca1" class="handleclick" type="checkbox" name="ca">
                    <label for="ca1"><span></span>Heart</label>
                </li>
                <li>
                    <input value="2" id="ca2" class="handleclick" type="checkbox" name="ca">
                    <label for="ca2"><span></span>General</label>
                </li>
                <li>
                    <input value="3" id="ca3" class="handleclick" type="checkbox" name="ca">
                    <label for="ca3"><span></span>Dental</label>
                </li>
                <li>
                    <input value="16" id="ca16" class="handleclick" type="checkbox" name="ca">
                    <label for="ca16"><span></span>Maternity</label>
                </li>
                <li>
                    <input value="17" id="ca17" class="handleclick" type="checkbox" name="ca">
                    <label for="ca17"><span></span>Orthopedic</label>
                </li>
                <li>
                    <input value="18" id="ca18" class="handleclick" type="checkbox" name="ca">
                    <label for="ca18"><span></span>Pediatric</label>
                </li>
                <li>
                    <input value="19" id="ca19" class="handleclick" type="checkbox" name="ca">
                    <label for="ca19"><span></span>Mental Health</label>
                </li>
            </ul> 
            <span class="expand-collapse-text exp"> 
                <i class="fa fa-sort-desc"></i> 
            </span>
            <div class="left-title">Super Speciality</div> 
            <span class="expand-collapse-text exp"> 
                <i class="fa fa-sort-desc"></i> 
            </span>
            <div class="left-title">General</div>
        </div>
    </div>
    <div class="content_left"> 
        <span class="expand-collapse-text exp"> 
            <i class="fa fa-sort-desc"></i>  
        </span>
        <div class="left-title">Charges
            <select name="Charges">
                <option>In Rupees</option>
                <option></option>
            </select>
        </div>
        <div class="content-left1 charges">
            <input type="text" id="amount" readonly>
            <div id="slider-range"></div>
            <br>
            <input type="text" id="amount1" readonly>
            <div id="slider-range1"></div>
        </div>
    </div>
    <div class="content_left"> 
        <span class="expand-collapse-text exp"> 
            <i class="fa fa-sort-desc"></i>  
        </span>
        <div class="left-title">Facilities</div>
        <div class="content-left1 facilities">
            <ul class="left_options list-unstyled">
                <li>
                    <input value="1" id="ca1" class="handleclick" type="checkbox" name="ca">
                    <label for="ca1"><span></span>Ambulance services</label>
                </li>
                <li>
                    <input value="2" id="ca2" class="handleclick" type="checkbox" name="ca">
                    <label for="ca2"><span></span>In House Laboratory</label>
                </li>
                <li>
                    <input value="3" id="ca3" class="handleclick" type="checkbox" name="ca">
                    <label for="ca3"><span></span>Pharmacy</label>
                </li>
                <li>
                    <input value="16" id="ca16" class="handleclick" type="checkbox" name="ca">
                    <label for="ca16"><span></span>Blood Bank</label>
                </li>
                <li>
                    <input value="17" id="ca17" class="handleclick" type="checkbox" name="ca">
                    <label for="ca17"><span></span> ICU</label>
                </li>
                <li>
                    <input value="18" id="ca18" class="handleclick" type="checkbox" name="ca">
                    <label for="ca18"><span></span> Operation Theatre</label>
                </li>
                <li>
                    <input value="19" id="ca19" class="handleclick" type="checkbox" name="ca">
                    <label for="ca19"><span></span> Eye Bank</label>
                </li>
                <li>
                    <input value="20" id="ca20" class="handleclick" type="checkbox" name="ca">
                    <label for="ca20"><span></span> ATM</label>
                </li>
                <li>
                    <input value="21" id="ca21" class="handleclick" type="checkbox" name="ca">
                    <label for="ca21"><span></span> Cafetaria</label>
                </li>
                <li>
                    <input value="22" id="ca22" class="handleclick" type="checkbox" name="ca">
                    <label for="ca22"><span></span>Parking</label>
                </li>
            </ul>
        </div>
    </div>
</div>

这就是剧本。

$(document).ready(function(){
    $("#filter").click(function(){
        $("#sidebar").toggle();
    });
});

我想用过滤器按钮切换侧边栏。我正在使用position: absolute作为侧边栏。我是jQuery的新手，我认为解决方案很简单，我只是无法弄清楚如何。