scroll to and reveal div on click - jquery

I can do the above mentioned, but as I'm new to jquery I wondered if anyone could show me a 'more efficient' solution to the problem.

Basically, when a radio is clicked, it will reveal and scroll to a div.

$("input:radio[name='one']").click(function() {      
  $('table.one').fadeIn(800); 
  $('html, body').animate({scrollTop:$('table.one').position().top}, 'slow');
});

$("input:radio[name='two']").click(function() {      
  $('table.two').fadeIn(800); 
  $('html, body').animate({scrollTop:$('table.two').position().top}, 'slow');
});

$("input:radio[name='three']").click(function() {      
  $('table.three').fadeIn(800); 
  $('html, body').animate({scrollTop:$('table.three').position().top}, 'slow');
});

<table class="one" style="display: none;"> ...

I've used the same script three times, what is the best way of scripting this? Many thanks :-)

Answers


You could make the code dryer by getting the target table from the input thats been clicked by giving it a data attribute such as <input type='radio' data-table='one' />

$("input:radio").click(function() {   
  var table = 'table.' + $(this).attr('data-table');   
  $('' + table).fadeIn(800); 
  $('html, body').animate({scrollTop:$('' + table).position().top}, 'slow');
});

There are several other ways you can get the table fro the input though, such as a class.


Need Your Help

decodeURIComponent(uri) is not working?

php javascript ajax urlencode encodeuricomponent

I'm using Ajax to post contents, and I'm using http.send(encodeURIComponent(params)); for encoding ... but I'm unable to decode them in PHP. I'm using POST so I didn't think it required encode? I'm

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.