Convert jQuery to Prototype JS

Question

I need to convert the following jQuery into Prototype JS.

jQuery("button.btn-transcript").click(function() {
  tsTarget = jQuery(this).attr("data-target");
  if (jQuery(this).hasClass("collapsed")) {
    jQuery(tsTarget).show(200);
    jQuery(this).removeClass("collapsed");
    jQuery(this).attr("area-expanded","true");
  } else {
    jQuery(tsTarget).hide(200);
    jQuery(this).addClass("collapsed");
    jQuery(this).attr("area-expanded","false");
  }
});

I gave it a try but I'm not too good with JS prototype. Am I heading in the right direction?

$("button.btn-transcript").on('click', 'button.btn-transcript', function(event, el)) {
  transTarget = $(this).readAttribute("data-target");
  function(event,el) {
    if($(this).hasClassName("collapsed")) {
      $("transTarget").show();
      $(this).removeClassName("collapsed");
      $(this).writeAttribute("area-expanded", "true");
    } else {
      $("transTarget").hide();
      $(this).addClassName("collapsed");
      $(this).writeAttribute("area-expanded", "false");
    }
  }

Answer 1

Try this:

$(document).on('click', 'button.btn-transcript', function(evt, elm) {
  var tsTarget = $$(elm.readAttribute('data-target')).first();
  elm.toggleClassName('collapsed');
  tsTarget.toggle();
  elm.writeAttribute('aria-expanded', 
    (elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true'));
});

It's not going to work 100% the same, because hide and show in Prototype (which are collapsed here into the one-liner toggle) are instantaneous. If you want the item to transition over 200ms the way you had written yours, you will need to use CSS transition effects.

If your button controls more than one item (if more than one element in the DOM matches what you have entered in the data-target attribute), then you would change this very slightly:

$(document).on('click', 'button.btn-transcript', function(evt, elm) {
  var tsTargets = $$(elm.readAttribute('data-target'));
  elm.toggleClassName('collapsed');
  tsTargets.invoke('toggle');
  elm.writeAttribute(
    'aria-expanded', 
    (elm.readAttribute('aria-expanded') == 'true' ? 'false' : 'true')
  );
});