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> 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> Section 1</h3></a>
<li><a href="#" id="show" name="heada"><h3> Section 2</h3></a>
<li><a href="#" id="show" name="heada"><h3> 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.