jQuery Forum

Hello,

I'm working on an expandable list list that breaks out certain items if they meet the search query. By break out, I mean they get listed below the bar of the collapsed list. Like this.
+Click for full application list
      Known use:
      -Test item 2

+Click for full application list (expanded example)
      -Test item 1
      -Test item 2
      -Test item 3
      Known use:
      -Test item 2

I hope that explains that well enough. When I mean break out, the whole UL for that search result needs to show on it's own. i.e.
<ul id="Test item 2">
<li>blah</li>
<li>blah</li>
</ul>

Further, when the list is collapsed again, the broken out items would still show. I have the expand/collapse part working, yippee, but that's it. I had the items breaking out also at one point I thought, but I don't know what I did to make that happen now as I lost my notes on that after a recent laptop format... but the list wouldn't expand/collapse in that version. I've been working on this for weeks, lol. Note, I'm self taught, please go easy on me. As you see it's another late night of trail and error, so I thought I'd reach out on this one. Below is the code I've been playing with.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('#alist li').hide();
$('#alistbutton').click(function(){
     $('#alist li').toggle(200);
$(document).ready(function(){
     var test = $('#model').val();
     $('test').show();
});
});
});
</script>
<button id="alistbutton">Application List</button>
<ul id="alist">
<li>Ski's
<ul id="Test item 1">
<li>blah</li>
<li>blah</li>
</ul>
<ul id="Test item 2">
<li>blah</li>
<li>blah</li>
</ul>
<ul id="Test item 3">
<li>blah</li>
</ul>
</li>
</ul>

I hope someone can help me out with this, if it's even possible what I'm trying to achieve?
Thanks,
Alex