Question

Here is my Javascript:

<script type="text/javascript">
$(document).ready(function(){
    function showhideitems(itemID){
      if ($(itemID).css('display') == 'none')
      {
        $(itemID).show('slow'); 
      } else { 
        $(itemID).hide('slow');
      } 
    }
});
</script>

When I call the function using:

`<a href="#" onClick="showhideitems('#players1')">`

It doesn’t work (the div doesn’t show/hide). What is wrong with the above function?

Answer 1

I would do something more flexible

I would add a data attribute to the a tag, describing which elements to manipulate. The attribute value can include any valid jQuery selector.

<a href="#" data-hide="#players1">Click me</a>

The the JavaScript will listen for click events on all tags with the data-hide attribute.

$(function(){
    $('[data-hide]').live('click', function(event){
        event.preventDefault();
        var targetEl = $(this).attr('data-hide');
        $(targetEl).toggle('slow');
    });
});

See an example http://jsfiddle.net/emil/8xtpf/

The good thing about this approach is that you can reuse the function to hide different elements, triggered by different anchors. All you need to do it add the data-hide attribute.