javascript - Remove jquery repetition -

i have jquery function toggles ckeditor text field on click.

my .js file:

$(function() {   $(".add-greeting").on("click", function(event){     $(".panel-body").find('#add-greeting').slidetoggle(400,       function(){         $('html, body').animate({           scrolltop: $('#add-greeting').offset().top +   $('window').height()         }, 1000);       });       return false;     }); }); 

my html.erb file:

<div class="form-group", style="padding-bottom:0px;">   <%= link_to "add greeting", "#", class: "add-greeting btn btn-sm btn-success" %> </div>  <div id="add-greeting" style="float:left; display:none;">   <%= f.input :offer_greeting, value: offer_settings(@offer, :offer_greeting), as: :ckeditor %> </div> 

the problem is, have 2 ckeditor fields, 2 buttons, translates 2 identical jquery functions, difference being classes , ids passing in.

$(function() {   $(".add-observations").on("click", function(event){     $(".panel-body").find('#add-observations').slidetoggle(400,       function(){         $('html, body').animate({           scrolltop: $('#add-observations').offset().top + $('window').height()         }, 1000);       });       return false;     }); }); 

rendered html:

<div class="form-group", style="padding-bottom:0px;">   <a class="add-greeting btn btn-sm btn-success" href="#">add greeting</a> </div> <div id="add-greeting" style="float: left; display: none;">   <div class="control-group ckeditor optional offer_offer_greeting"><label class="ckeditor optional" for="offer_offer_greeting">greeting</label>... 

how can avoid repetition?

i need give each link class of .animate-scroll

change link have href id want scroll , shared class:

<a class="animate-scroll btn btn-sm btn-success" href="#add-greeting">add greeting</a> 

update jquery to:

var scrollable = $('html, body'); $(".animate-scroll").on("click", function (event) {     event.preventdefault();      var elem = $($(this).attr('href'));      elem.slidetoggle(400,     function () {         scrollable.animate({             scrolltop: elem.offset().top + $(window).height() // no need quotes around window         }, 1000);     }); });