After scouring through StackOverflow in search of a solution to what I perceive as a simple issue, I have come up empty-handed. It seems like I may be using the wrong keywords in my search.
I am interested in finding out how to condense the following code into just a few lines. Essentially, when 'link-#' is clicked, it should display the content from the hidden div 'more-#' (where the number in 'more-' corresponds to the number in 'link-#'). The current code snippet looks like this:
jQuery("#link-1").click(function(){
jQuery('#more').hide().html($('#more-1').html()).fadeIn(400)
});
jQuery("#link-2").click(function(){
jQuery('#more').hide().html($('#more-2').html()).fadeIn(400)
});
jQuery("#link-3").click(function(){
jQuery('#more').hide().html($('#more-3').html()).fadeIn(400)
});
and so on.
I have attempted to come up with a more efficient way to achieve this by writing the code snippet below, however, it does not seem to work as intended.
jQuery("#link" + NUMBER ).click(function(){
jQuery('#more').hide().html($('#more-' + this.NUMBER).html()).fadeIn(400)
});
If anyone has insights on how to properly address this issue, I would greatly appreciate your assistance.
Thank you in advance for your help.
Sincerely,
Thomas