Show And Hide Elements

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 worki

Solution 1:

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 outif ($(this).text().search(newRegExp(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

Solution 2:

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.

Solution 3:

Add a class to every section header For Eg:

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

and then the keyup function close, just add :

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