Hi. I'm new to jquery and, in addition, I think I'm having a brain freeze.

I have a number of links with different ids. I want to match the clicked link with a div with the corresponding class so the div will show/hide/toggle as appropriate.

I have:

<script type="text/javascript">
$(document).ready(function() {
 $('.folioBox').hide();

 $('a.interface').click(function(){
        var currentId = $(this).attr('id');
        var currentBox = $('.folioBox .' + currentId);

        $(currentBox).toggle(400);

        });
});
</script>


<a class="interface" id="apple">Apple flavor</a>
<a class="interface" id="banana">Banana flavor</a>
<a class="interface" id="cherry">Cherry flavor</a>

<div class="folioBox apple">content</div>
<div class="folioBox banana">content</div>
<div class="folioBox cherry">content</div>

I just can't get it to work and I can't figure out whether I would be best using match or find or filter.

Some assistance would be much appreciated!