Accordion JQuery Search

Question

I have an accordion set up on a website i am building however i have been trying to implement a search function. Potentially as you type, to hide & display each accordion based on the search.

here is my HTML code for two cards which are part of the accordion:

<div class="search-container">
            <input class="input-medium search-query" id="searcher" placeholder="Search">
            <button class="btn">Search</button>
    </div>
    <br>
    <div id="accordion" class="accordion">
        <div class="card m-b-0">
            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <a class="card-title">
                    Why should I use Imperial Claims Consultants?
                </a>
            </div>
            <div id="collapseOne" class="card-block collapse" style="padding: 20px;">
                <p>
                    Imperial Claims are industry experts in dealing with commercial, industrial, homeowners and landlords insurance claims and we have, and continue to provide our clients with a truly personal and bespoke service. With over 80 years combined in-house claims handling experience there isn’t any type of disaster that we haven’t already managed. From small claims to the largest of claims, we can truly assist.
                </p>
                <p>
                    Loss assessors are typically professional companies and individuals that will negotiate on the policyholder’s behalf to progress a claim to resolution. It could be said that they offer a claims management service for the policyholder, meaning the policyholder doesn’t have to spend time dealing with the insurer – the loss assessor will typically do this.
                </p>
                <p>
                    A Loss Assessor, like Imperial Claims Consultants, will look at the damage, assess the costs involved and they may then take the lead in all discussions on the claim with the insurers or loss adjusters concerned. Loss Assessors are employed by the policyholder, they are acting exclusively to protect the policyholders best interests.
                </p>
                <p>
                    Imperial Claims Consultants are a Financial Conduct Authority registered firm. We are authorised to assist clients with their insurance claims. We work for the policyholder only, never the insurer. Our service will not cost the insured anything provided they use our panel of contractors.
                </p>
                <p>
                    We help clients who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>
                <ul>
                    <li><span> - </span>Fire</li>
                    <li><span> - </span>Flood</li>
                    <li><span> - </span>Explosion</li>
                    <li><span> - </span>Storm</li>
                    <li><span> - </span>Impact Damage</li>
                    <li><span> - </span>Subsidence</li>
                    <li><span> - </span>Theft</li>
                    <li><span> - </span>Burglary</li>
                    <li><span> - </span>Contents</li>
                    <li><span> - </span>Business Loss</li>
                    <li><span> - </span>Liability Claims</li>
                    <li><span> - </span>Professional Indemnity</li>
                    <li><span> - </span>Loss Of Licence</li>
                </ul>
            </div>
        </div>
        <br>
        <div class="card m-b-0">
            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                <a class="card-title">
                    Which insurance claims can Imperial Claims Consultants help me with?
                </a>
            </div>
            <div id="collapseTwo" class="card-block collapse" style="padding: 20px;">
                <p>
                    We help clients who have suffered from the insurance covered perils relating to building and/or contents such as:
                </p>
                <ul>
                    <li><span> - </span>Fire</li>
                    <li><span> - </span>Flood</li>
                    <li><span> - </span>Explosion</li>
                    <li><span> - </span>Storm</li>
                    <li><span> - </span>Impact Damage</li>
                    <li><span> - </span>Subsidence</li>
                    <li><span> - </span>Theft</li>
                    <li><span> - </span>Burglary</li>
                    <li><span> - </span>Contents</li>
                    <li><span> - </span>Business Loss</li>
                    <li><span> - </span>Liability Claims</li>
                    <li><span> - </span>Professional Indemnity</li>
                    <li><span> - </span>Loss Of Licence</li>
                </ul>
                <p>
                    So, before you contact the insurers, contact Imperial Claims Consultants for a very personal and bespoke service.
                </p>
                <p>
                    Don’t forget, If our sister company, Imperial Maintenance and/or its sub-contractors are used for managing the entire reinstatement works process, then you truly will not have a single penny to pay at all as our fee would be paid by our sister company.
                </p>
            </div>
        </div>

This also includes my search bar.

However I need to display a card based on an on text search. I tried the following however it didn't work even with a button:

 $("#searcher").on("keyup click input", function () {
    var val = $(this).val();
    if(val.length) {
        $(".accordion .card.m-b-0").hide().filter(function () {
            return $('input', this).val().toLowerCase().indexOf(val.toLowerCase()) !== -1;
        }).show();
    }
    else {
        $(".accordion .card.m-b-0").show();
    }
});

Can someone point me in the correct direction?

Answer 1

 $(document).ready(function(){ $("#searcher").on("keypress click input", function () { var val = $(this).val(); if(val.length) { $(".accordion .card.mb-0").hide().filter(function () { return $('.card-title', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1; }).show(); } else { $(".accordion .card.mb-0").show(); } }); //for test //$("#searcher").val('us').keyup(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search-container"> <input class="input-medium search-query" id="searcher" placeholder="Search"> <button class="btn">Search</button> </div> <br> <div id="accordion" class="accordion"> <div class="card mb-0"> <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a class="card-title"> Why should I use Imperial Claims Consultants? </a> </div> <div id="collapseOne" class="card-block collapse" style="padding: 20px;"> <p> We help them clients who have suffered from the insurance covered perils relating to building and/or </p> <p> We help clients who have suffered from the insurance covered perils relating to building and/or contents such as: </p> </div> </div> <br> <div class="card mb-0"> <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="card-title"> Which insurance claims can Imperial Claims Consultants help me with? </a> </div> <div id="collapseTwo" class="card-block collapse" style="padding: 20px;"> <p> We help clients who have suffered from the insurance covered perils relating to building and/or contents such as: </p> <p> So, before you contact the insurers, contact Imperial Claims Consultants for a very personal and bespoke service. </p> </div> </div> 

On Your Request I have updated The answer

 $(document).ready(function(){ $("#searcher").on("keypress click input", function () { var val = $(this).val(); if(val.length) { $(".accordion .card.mb-0 .collapsed").hide().filter(function () { return $('.card-block', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1; }).show(); } else { $(".accordion .card.mb-0 .collapsed").show(); } }); //for test //$("#searcher").val('us').keyup(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search-container"> <input class="input-medium search-query" id="searcher" placeholder="Search"> <button class="btn">Search</button> </div> <br> <div id="accordion" class="accordion"> <div class="card mb-0"> <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a class="card-title"> Why should I use Imperial Claims Consultants? </a> </div> <div id="collapseOne" class="card-block collapse" style="padding: 20px;"> <p> We help them clients who have suffered from the insurance covered perils relating to building and/or </p> <p> We help clients who have suffered from the insurance covered perils relating to building and/or contents such as: </p> </div> </div> <br> <div class="card mb-0"> <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="card-title"> Which insurance claims can Imperial Claims Consultants help me with? </a> </div> <div id="collapseTwo" class="card-block collapse" style="padding: 20px;"> <p> We help clients who have suffered from the insurance covered perils relating to building and/or contents such as: </p> <p> So, before you contact the insurers, contact Imperial Claims Consultants for a very personal and bespoke service. </p> </div> </div>