how to match var/id to class

Question

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!

Answer 1

Try:

$("a.interface").click(function() {
  $("div.followBox." + this.id).toggle(400);
  return false;
});

No need to make it more complex than that. If there are multiple matches, then they'll all be toggled.

Note: I've made the click handler return false so stop the link being followed. Depending on what you have in the href attribute, the page may actually being refreshed, which explains why it appears not to be working.

Answer 2

Just looking at it now but have you tried doing a return false at the end because you are hitting an anchor?

let me know if that works and i'll stop debugging this end.

EDIT

Get rid of the space between the two classes.

var currentBox = $('.folioBox.' + currentId);