Show and hide elements

Question

I've managed to get my menu system working which now shows and hides sections when they are clicked on.

I've also added a search feature to this and that works as well.

Full working version is available on this JFiddle

Each section is made as follows :

<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>

The slight issue I have is when searching I don't want to lose the section headers. eg :

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

Currently the search returns the correct results, but the headers are gone.

Is there anyway to keep the headers visible ?

The class="slider" applies a border section entries, if there are no entries returned from the search can we hide the entire DIV keeping the header visible, similar to how the toggle show/hide currently works. ?

and finally when searching, if I delete anything from the search field it doesn't update the page to show the new results.

I'm assuming this is because I've hidden them and I'm not re showing them, but I'm not sure how.

Answer 1

AS per your requirement, please check the link

jsfiddle

There was space in div because of <br/> element. After removing this, you are able to reduce the border as the items hide.

For creating menu, you must use the elements <ul><li> and link inside <li> This will give you alignment as you required.

Answer 2

I think this is you are asking.

Updated code:

$("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++;
        }
});

Example: JFiddle

Answer 3

Add a class to every section header For Eg:

<a href="#" id="show" class="headTag" name="heada"><h3>&nbsp;Section 1</h3></a>

and then the keyup function close, just add :

$(".headTag").show();