JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <div id="contain">
        <ul id="navlist">
            <form id="live-search" action="" class="styled" method="post">
                <fieldset>
                    <input type="text" class="text-input" id="filter" value="" /> <span id="filter-count"></span>

                </fieldset>
            </form>
            <br/>
            <br/>
            <li><a href="#" id="show" name="heada"><h3>&nbsp;Section 1</h3></a>

                <div class="slider" style="display:block; display:none;">	<a href="">Section 1 - Item 1</a>

                    <br/>	<a href="">Section 1 - Item 2</a>

                    <br/>	<a href="">Section 1 - Item 3</a>

                    <br/> <a href="">Test</a>

                    <br/>
                </div>
            </li>
            <li><a href="#" id="show" name="heada"><h3>&nbsp;Section 2</h3></a>

                <div class="slider" style="display:block; display:none;">	<a href="">Section 2 - Item 1</a>

                    <br/>	<a href="">Section 2 - Item 2</a>

                    <br/>	<a href="">Section 2 - Item 3</a>

                    <br/>
                </div>
            </li>
            <li><a href="#" id="show" name="heada"><h3>&nbsp;Section 3</h3></a>

                <div class="slider" style="display:block; display:none;">	<a href="">Section 3 - Item 1</a>

                    <br/>	<a href="">Section 3 - Item 2</a>

                    <br/>	<a href="">Section 3 - Item 3</a>

                    <br/>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

.slider {
    color:black;
    width:200px;
    border: 1px solid #000;
}

JavaScript

$(document).ready(function () {
    $('.slider').hide(800);
    $('a#show').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.slider')
        $('.slider').not(elem).hide();
        elem.toggle();
    });

    $("#filter").keyup(function () {

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(),
            count = 0;

        // Loop through the comment list
        $("a:not([name='heada'])").each(function () {

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide().closest(".slider").hide();

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show().closest(".slider").show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});