Аккордионы со скроллом

html + js

    <dl class="accordion">

        <dt>Заголовок</dt>

        <dd>
            Контент
        </dd>

        <dt>Заголовок</dt>

        <dd>
            Контент
        </dd>

        <dt>Заголовок</dt>

        <dd>
            Контент
        </dd>

    </dl>


    if($(".accordion").length){

    	self.jqueryExtend();

    	$(".accordion").accordion();

    }

	jqueryExtend: function(){

		$.fn.extend({

        	/**
			** Accordion plugin
			** @param toggle - set to true, if need to be toggle
			** @return jQuery
			**/

	        accordion : function(toggle){

	           return this.each(function(){

	            var $this = $(this),
	             active = $this.children('dt.active').length ? $this.children('dt.active') : null;

	            $this.children('dt').not(active).next().hide();

	            $this.on('click', 'dt', function(){

	            	var $this = $(this);

		             if(!toggle){

		             	if($(this).hasClass('active')){

			              $(this).removeClass('active')
			                .siblings('dt')
			                .removeClass('active')
			                .end()
			                .siblings('dd')
			                .stop()
			                .slideUp();

		             	}
		             	else{

		             		$(this).addClass('active')
			                .siblings('dt')
			                .removeClass('active')
			                .end()
			                .next('dd')
			                .stop()
			                .slideDown(500, function(){

			             		var offset = $this.next().offset().top,
			             			headerH = $('#header').height();

			                	$("html").animate({
							    	'scrollTop': offset
							    },1000);
							    $("body").animate({
							    	'scrollTop': offset - headerH
							    },1000);
			                })
			                .siblings('dd')
			                .stop()
			                .slideUp();


		             	}

		             }
		             else{
		              $(this).toggleClass('active').next().stop().slideToggle();
		             }

	            });


	          });

       		}


		});

	},