Jquery hide/show elements

Question

I'm trying to do this in javascript but more optimized and with toggle function working !

My js code:

$(document).ready(function() {
    $('a.details').click(function(e){
        var id= '';
        $('a.details').each(function() {
            id = $(this).attr('href');
            $('#'+id).hide();
        });
        $(this).addClass('active');
        id = $(this).attr('href');
        $('#'+id).toggle();
        e.preventDefault();
   });
});

Answer 1

Terrible way of doing things. Instead take a look at this:

http://jsfiddle.net/xzpkq/

Maybe you will be inspired to produce better code

Answer 2

Here is my take on this WITHOUT changing the html except for adding at to the ID of the rows

http://jsfiddle.net/mplungjan/Rfn8z/

Comments welcome ( especially if voting down)

$(document).ready(function() {
  $('a.details').each(function() {
    var tr = $("#t"+parseInt($(this).html()));
    var link = this;
    $(this).toggle(
      function(e){tr.show(); $(this).addClass('active');   e.preventDefault();},
      function(e){tr.hide(); $(this).removeClass('active');e.preventDefault();}
    );
  });
});