Адаптивный Аккордеон jQuery и CSS

Блок с содержанием в стиле аккордеон

HTML

<div class="container">
<!--Блок аккордеон -->
<ul id="accordion">
	<!--Первая группа -->
	<li class="title"><i class="fa fa-newspaper-o"></i>Текстовый Блок</li>
	<li class="content">
		<h2>Адаптивный Аккордеон на CSS и jQuery</h2>
        <p>Вы смотрите наглядный пример работы блоков с содержанием в популярном стиле "аккордеон", реализованных с помощью небольшего плагина jQuery и CSS. В формировании внешнего вида панелей, раскрывающихся блоков с содержанием, задействованы стандартные свойства CSS. Базовая структура "Аккордеона" представляет из себя неупорядоченный список. Раскрытие блоков с содержанием происходит по клику на основные пукты, плавно с задержкой в 300 миллисекунд. При открытии каждого последующего блока, предыдущий блок закрывается, что позволяет сохранить общую высоту блока "аккордеон" в пределах размеров встроенного содержания.При загрузке страницы, первый блок "аккордеона" загружается в раскрытом состоянии, чтобы при загрузке все блоки оставались закрытыми достаточно внести некоторые изменения в исполняемый js, подробнее вы можете узнать изучив материал на блоге <a href="http://dbmast.ru/" target="_blank">Dobrovoimaster</a>.</p>
	</li>
	<!-- /первая группа -->
	
	<!--Вторая группа -->
	<li class="title"><i class="fa fa-picture-o"></i>Встроенные миниатюры</li>
	<li class="content">
		<h2>Встроенные изображения в содержание</h2>
        	<p><img src="http://placehold.it/120x120" class="thumbnail" alt="" />Вы смотрите наглядный пример работы блоков с содержанием в популярном стиле "аккордеон", реализованных с помощью небольшего плагина jQuery и стилей CSS. В формировании внешнего вида панелей, раскрывающихся блоков с содержанием, задействованы стандартные свойства CSS.Вы смотрите наглядный пример работы блоков с содержанием в популярном стиле "аккордеон", реализованных с помощью небольшего плагина jQuery и стилей CSS. В формировании внешнего вида панелей, раскрывающихся блоков с содержанием, задействованы стандартные свойства CSS.</p>
  <p><img...

CSS

/* CSS Демо */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=latin,cyrillic");
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
body {
	font: 14px/1.5 'Open Sans', sans-serif;
	background: #eee;
	}
.container {
   max-width: 960px;
   min-width: 320px; 
   margin: 0 auto;
   padding: 15px 5px 0;
}

/* Базовые стили аккордеона */
#accordion {
	margin:0 auto;
	padding:0;
    width:100%;
	max-width:860px;
    min-width: 280px;
	}
	
#accordion li {
	list-style:none;
	}
/* Стили блоков с содержанием */	
#accordion li.content {
	margin:0;
	padding: 15px;
	border: 1px solid rgba(180,180,180,1);
    border-top: 0;
	background: #fff;
    -webkit-box-shadow: 0px 3px 8px 0 rgba(0,0,0,0.5) inset;
    box-shadow: 0px 3px 8px 0 rgba(0,0,0,0.5) inset;
	}
/* Стили основных пунктов */	
#accordion li.title {
	padding:10px 20px;
	font-size:1.2em;
	line-height:2em;
	color:#FFF;
	cursor: pointer;
	background: #3498db;
	border-bottom: 1px solid #2980b9;
}
#accordion i{margin-right: 10px;}
/* Стили основных пунктов при наведении */
#accordion li.title:hover{
    background: #3e9fe0;
    padding-left:25px;
}
/* Блоки с содержанием скрыты */
#accordion .hide {
	display:none;
}
#accordion li.content p {
  margin: 5px 0 5px;
  line-height: 1.5;
    overflow: hidden;
}
/* Стили заголовка h2 */
#accordion li.content h2 {
	font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 10px;
}
/* Миниаюры в тексте */
.thumbnail { 
    float:left; 
    margin: 0 15px 5px 0;
    display: block; 
    border: 1px solid #ddd;
    padding: 3px; 
}
/* Миниаюры справа */
.thumbnail_inverse { 
    float: right; 
    margin: 0 0 5px 15px; 
}
/* Встроенное адаптивное видео */
.video { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow:hidden;  
} 
 
.video iframe,...

JavaScript

$(document).ready(function() {
    $('#accordion li.content').filter(':nth-child(n+3)').addClass('hide');
	
	$('ul').on('click','li.title',function() {
		$(this).next().slideDown(300).siblings('li.content').slideUp(300);
		})
});