jQuery Fading Slide Toggle

Adding fading capability to slideUp/slideDown author(s): Don Walter

HTML

<script>
    /*
* jQuery Fading Slide Toggle 1.0.1, jQuery plugin
* https://github.com/donwalter/jquery-fading-slide-toggle
*
* Copyright(c) 2013, Don Walter
* http://www.don-walter.com/
*
* Adds fading capabilities to slideUp and slideDown
* Licensed under the MIT License
*/

(function($) {
	$.fn.fadingSlideToggle = function($el, options) {
		var defaults = {
			duration:	500,
			easing:		'swing',
			trigger:	'click'
		};

		var settings = $.extend({}, defaults, options)
			$selector = $(this).selector;

		return this.each(function() {
			var $this = $(this);

			$(document).on(settings.trigger, $selector, function(e) {
				e.preventDefault();
				if ($($el).css('display') == 'none') {
					$($el).animate({
						opacity: 'toggle',
						height: 'toggle'
					}, settings.duration, settings.easing);
				} else {
					$($el).animate({
						opacity: 'toggle',
						height: 'toggle'
					}, settings.duration, settings.easing);
				}
			});
		});
	};
})(jQuery);
</script>
<a id="clickedEl"><span>Click Me</span></a>
<nav role="navigation" id="toggleEl">
	<ul>
  		<li><a href="#">Item 1</a></li>
  		<li><a href="#">Item 2</a></li>
  		<li><a href="#">Item 3</a></li>
	</ul>
</nav>

CSS

#toggleEl {
  display:none;
}

nav[role="navigation"] ul {
  padding-left:0;
}

nav[role="navigation"] li {
  list-style-type:none;
  padding:0.5em;
  display:block;
  width:100%;
  margin-left:0;
  border:1px solid black;
}

JavaScript

$(function(){
	$('#clickedEl').fadingSlideToggle('#toggleEl');
});