Refining/simplifying jquery for hiding and showing fieldsets I'm starting to figure out this jquery stuff, but as you can see there's a long ways to go. How would I approach refining and simplifying this snippet. Its purpose is to show a fieldset[data-content] with inputs inside when you click a "show" link, and to hide said fieldset and remove all "required" attributes when you click the "Hide" link.

I'm using data-* for all functionality and .class for styling. Hence not using classes/ID's for these items. 

JQuery

$(function() {
  $('[data-content]').hide(); // hide content initially
  $('[data-show]').click(function() {
    $('[data-content]').fadeIn('slow'); //fade in/show content
    $(this).addClass('active'); //add .active to "show" link
    $('[data-hide]').removeClass('active'); // remove .active from "hide" link
    $("[data-content] :input").prop('required',true); // add required if :visible
  return false;
  });
  $('[data-hide]').click(function() {
    $('[data-content]').fadeOut('fast'); //fade out/hide content
    $(this).addClass('active'); //add active class to "hide" link
    $('[data-show]').removeClass('active'); //remove active class from "show" link
    $("[data-content] :input").prop('required',null); // remove "required" if :hidden
  return false;
  });
});


HTML example

&lt;a href="#" data-show class="active"&gt;Show&lt;/a&gt;
&lt;a href="#" data-hide&gt;Hide&lt;/a&gt;

&lt;fieldset data-content&gt;
  &lt;input type="text" placeholder="Yada"&gt;&lt;!-- only required if visible --&gt;
&lt;/fieldset&gt;
&lt;fieldset&gt;
  &lt;input type="text" placeholder="yada2" required&gt;
&lt;/fieldset&gt;
Store selections in variables; don't call $(...) again and again for elements you've already selected
You start out by hiding the fieldset, but it'd be simpler to just hide it with CSS, so it starts out hidden by default. Conversely, if it's visible by default, then add the required attributes in the html, so it actually matches the behavior you want for a visible fieldset.
You're using data-* attributes, but not super effectively (see below).


The way you're using the data-* attributes is basically the same way you'd use a class or ID; as a key to help you find stuff. So you might as well use classes and IDs then, if you're not going to use the data-* attributes to store a value in addition to the key. But for cases like this, where you want a link to refer to an element, I suggest the following:

&lt;a href="#someElement"&gt;Foo&lt;/a&gt;

&lt;div id="someElement"&gt;...&lt;/div&gt;


The link is completely valid syntactically and semantically: It references an element.

Without JS intervening, it'll just scroll the page to element, but with JS, we can intercept the click and do the showing/hiding. Of course, there's no way to distinguish between hide and show links, but I think that should be a toggle-style action anyway.

But to keep to your setup, here's a way to do that (and now data-* attributes come in handy):

&lt;a href="#" data-shows="#someElement"&gt;Show&lt;/a&gt;
&lt;a href="#" data-hides="#someElement"&gt;Hide&lt;/a&gt;

&lt;div id="someElement"&gt;...&lt;/div&gt;


For the JS, you can then do something like this:

$(function() {
  var showLinks = $('a[data-shows]'),
      hideLinks = $('a[data-hides]');

  showLinks.on('click', function (event) {
    var target = $(this).addClass('active').data('shows');
    $(target).fadeIn().find(':input').prop('required', true);
    hideLinks.removeClass('active');
    return false;
  });

  hideLinks.on('click', function (event) {
    var target = $(this).addClass('active').data('hides');
    $(target).fadeOut().find(':input').prop('required', false);
    showLinks.removeClass('active');
    return false;
  });
});


There's a bit of repetition there, so you might do:

$(function() {
  var links = $('a[data-shows], a[data-hides]');

  links.on('click', function (event) {
    var link = $(this).addClass('active'),
        type = link.data('shows') ? 'shows' : 'hides',
        target = link.data(type),
        fadeFunc = type === 'shows' ? 'fadeIn' : "fadeOut";
    $(target)[fadeFunc]().find(':input').prop('required', type === 'shows');
    links.not(this).removeClass('active');
    return false;
  });
});


There are many ways of going about this