CODEWITHSUNDEEP
javascripthtmlcss
J.Halon
J.Halon

Reputation: 57

Hiding DIV Child Elements during HTML Search

I'm having some issue with my HTML and .js code for a website that I'm building.

Currently, I'm using collapsible DIV elements for a "Contact List" that I am building; as shown below.



<div>
    <input type="text" class="live-search-box" placeholder="Search Here" />
    </div>

<div >
    <div role="main" class="ui-content">
        <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
            <h3>Category</h3>
            <p>Defenition</p>
            <div data-role="collapsible" data-theme="a" data-content-theme="a">
                <h3>Sub-category</h3>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Location</h3>
                    <p>Point of Contact</p>
                </div><!-- /section 1A -->
            </div><!-- /section 1 -->
        </div>

        <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
            <h3>Category2</h3>
            <p>Defenition2</p>
            <div data-role="collapsible" data-theme="a" data-content-theme="a">
                <h3>Sub-Category</h3>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Location</h3>
                    <p>Point of Contact2</p>
                </div>
            </div>
        </div>


    </div>
</div>

The problem I am having is in my .js code. Currently, when I use the search feature it will search for the keyword, but it won't drill down and display it. The only thing it will show is the top or main DIV that the keyword is contained in. So I need to un-collapse the DIV and try search for the keyword manually.

You can see this in action at this JSFiddle: https://jsfiddle.net/dgaz8n5k/17/

What I'm trying to do is to get the my code to drill down the DIV's and show only the searched keyword. Something like this. This was my old code, but I couldn't use it since it broke my Search Function.

Is there any way I can get it to do the same thing, but without breaking my search function?

And if you're asking, how is it broken. If you look at my old project you can see that after you clean the search, or try collapsing the DIV, it would not work.

In general I need it to do the same thing with the search feature, but have functioning search and collapsible div's during search, just like my new project.

Upvotes: 2

Views: 77

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle.

You could do this by adding the following line :

$('.ui-icon-plus',this).click();

Just after :

$(this).show();

The added line will drill down the matched divs by clicking on + sign.

Hope this helps.

Upvotes: 2

Related Questions