Как плагин аккордеона заставить работать с новой версией Bootstrap? - Joomla 3.x: Шаблоны, разметка и макеты вывода

JHtml::_('script', Juri::base(). 'templates/' . $this->template . '/js/jquery-3.2.1.min.js', array('version' => 'auto', 'relative' => true)); 
JHtml::_('script', Juri::base(). 'templates/' . $this->template . '/js/bootstrap.js', array('version' => 'auto', 'relative' => true));

Html::_('stylesheet', Juri::base(). 'templates/' . $this->template . '/css/bootstrap.css', array('version' => 'auto', 'relative' => true));

Uncaught TypeError: toHide.size is not a function
    at HTMLDivElement.toggle (jquery.accordionfaq.js:146)
    at HTMLDivElement.clickHandler (jquery.accordionfaq.js:236)
    at HTMLDivElement.dispatch (jquery-3.2.1.min.js?81f25d3…:3)
    at HTMLDivElement.q.handle (jquery-3.2.1.min.js?81f25d3…:3)

JHtml::_('bootstrap.framework');

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

/** @var JDocumentHtml $this */

$app  = JFactory::getApplication();
$user = JFactory::getUser();
//$doc=JFactory::getDocument(); //Переменная, которая хранит ссылку на документ

// Output as HTML5
$this->setHtml5(true);

// Getting params from template
$params = $app->getTemplate(true)->params;

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');

if ($task === 'edit' || $layout === 'form')
{
	$fullWidth = 1;
}
else
{
	$fullWidth = 0;
}

// Add JavaScript Frameworks
//JHtml::_('bootstrap.framework');
//$doc->addScript('/templates/' . $this->template . '/js/jquery-3.2.1.min.js'); //Подключаем новую версию Framework с сайта "http://jquery.com"
//$doc->addScript('/templates/' . $this->template . '/js/bootstrap.js'); //Подключаем сам Bootstrap
JHtml::_('script', Juri::base(). 'templates/' . $this->template . '/js/jquery-3.2.1.min.js', array('version' => 'auto', 'relative' => true)); //Подключаем новую версию Framework
JHtml::_('script', Juri::base(). 'templates/' . $this->template . '/js/bootstrap.js', array('version' => 'auto', 'relative' => true)); //Подключаем сам Bootstrap
//Подключаем родной Bootstrap и jQuery
//JHtml::_('bootstrap.framework');
//JHtml::_('jquery.framework');


// Add template js
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));

// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

// Add Stylesheets
//JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
//$doc->addStyleSheet('/templates/' . $this->template . '/css/bootstrap.css'); //Подключаем стиль Bootstrap
//$doc->addStyleSheet('/templates/' . $this->template . '/css/styleicomoon.css'); //Подключаем стиль шрифтовых иконок
//$doc->addStyleSheet('/templates/' . $this->template . '/css/template.css'); //Подключаем свой стиль
//$doc->addStyleSheet('/templates/' . $this->template . '/css/menu.css'); //Подключаем свой стиль меню
JHtml::_('stylesheet', Juri::base(). 'templates/' . $this->template . '/css/bootstrap.css', array('version' => 'auto', 'relative' => true)); //Подключаем стиль Bootstrap
JHtml::_('stylesheet', Juri::base(). 'templates/' . $this->template . '/css/styleicomoon.css', array('version' => 'auto', 'relative' => true)); //Подключаем стиль шрифтовых иконок
JHtml::_('stylesheet', Juri::base(). 'templates/' . $this->template . '/css/template.css', array('version' => 'auto', 'relative' => true)); //Подключаем свой стиль
JHtml::_('stylesheet', Juri::base(). 'templates/' . $this->template . '/css/menu.css', array('version' => 'auto', 'relative' => true)); //Подключаем свой стиль меню



// Use of Google Font
if ($this->params->get('googleFont'))
{
	JHtml::_('stylesheet', '//fonts.googleapis.com/css?family=' . $this->params->get('googleFontName'));
	$this->addStyleDeclaration("
	h1, h2, h3, h4, h5, h6, .site-title {
		font-family: '" . str_replace('+', ' ', $this->params->get('googleFontName')). "', sans-serif;
	}");
}

// Template color
if ($this->params->get('templateColor'))
{
	$this->addStyleDeclaration('
	body.site {
		border-top: 3px solid ' . $this->params->get('templateColor'). ';
		background-color: ' . $this->params->get('templateBackgroundColor'). ';
	}
	a {
		color: ' . $this->params->get('templateColor'). ';
	}
	.nav-list > .active > a,
	.nav-list > .active > a:hover,
	.dropdown-menu li > a:hover,
	.dropdown-menu .active > a,
	.dropdown-menu .active > a:hover,
	.nav-pills > .active > a,
	.nav-pills > .active > a:hover,
	.btn-primary {
		background: ' . $this->params->get('templateColor'). ';
	}');
}

// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));

// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Adjusting content width (Настройка ширины контента)
if ($this->countModules('position-7') && $this->countModules('position-8')) /*Знак ! означает логическое не (отрицание)*/
{
	$span = "col-md-6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "col-md-9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "col-md-9";
}
else
{
	$span = "col-md-12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
	$logo = '<img src="' . JUri::root(). $this->params->get('logoFile'). '" alt="' . $sitename . '" />';
}
elseif ($this->params->get('sitetitle'))
{
	$logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle'), ENT_COMPAT, 'UTF-8'). '</span>';
}
else
{
	$logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>';
}

//Значение переменной $menuClass (класса меню), в зависимости от настройки, указанной в шаблоне (настройка стилядля меню), получаем ее конструкцией ($this->params->get('menuStyle'))
if ($this->params->get('menuStyle') == 0)
{
	$menuClass = "navbar-default";
}
elseif ($this->params->get('menuStyle') == 1)
{
	$menuClass = "navbar-red";
}
else
{
	$menuClass = "navbar-purple";
}


?>

<!--Заменили стандартную конструкцию текстом из файла index.html-->
<!DOCTYPE html>
<!--<html lang="en">-->
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> <!--Выбор языка контента-->
<head>
	<!--<meta charset="UTF-8">-->
	<meta name="viewport" content="width=device-width, initial-scale=1"> <!--Адаптация сайта к ширине экрана-->
	<!--<title>Document</title>-->
	<jdoc:include type="head" /> <!--Вывод метатегов-->
	<!--<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/styleicomoon.css">
	<link rel="stylesheet" href="css/template.css">-->
</head>
<body>

	<!--Вставка CSS кода, в зависимости от условия-->
	<?php if ($this->params->get('fonFile')) : ?> <!--Проверяем наличие фонового рисунока сайта-->
		<style type="text/css">
			body {
				background: url("<?php echo '/' . $this->params->get('fonFile'); ?>") repeat #e4e4e4;
			}
		</style>
	<?php endif; ?>

	<div class="contayner" id="main">
		<div class="row" id="header">	
			<div class="col-sm-10  col-xs-12" id="headertext">
				<a rel="nofollow" target="_blank" href="http://www.rosatom.ru">//РОСАТОМ</a>
				<a rel="nofollow" target="_blank" href="http://www.tvel.ru">/ТВЭЛ</a>
				<a rel="nofollow" target="_blank" href="http://www.elemash.ru">/ПАО «МСЗ»</a>
				<a target="_self" href="/">/ООО «МСЗ-М»</a>
			</div>
			<div class="col-sm-2  col-xs-12" id="headerimage">
				<a title="Главная страница"href="<?php echo $this->baseurl; ?>/"><img src="images/headers/home.png" width="100%" alt="Главная" /></a>
				<a title="Написать сообщение" href="mailto:mszm@mail.ru"><img src="images/headers/mail.png" width="100%" alt="Сообщение" /></a>
				<a title="Карта сайта"href="<?php echo $this->baseurl . '/index.php?option=com_xmap&view=html&id=1'; ?>/"><img src="images/headers/map.png" width="100%" alt="Главная" /></a>
			</div>

			<div class="col-sm-6  col-xs-12" id="logo"> <!--Логотип-->
				<a href="<?php echo $this->baseurl; ?>/"><img src="<?php echo $this->params->get('headerlogoFile'); ?>" width="100%" alt="Логотип" /></a>
			</div>
			<div class="col-sm-1  col-xs-2" id="headerurl">
				<a title="Перейти по ссылке" href="http://www.tvel.ru/wps/wcm/connect/tvel/tvelsite/about/structure/nuclearindustrystructure.htm" target="_blank"><img src="images/headers/otrasl.jpg" heihht="34px" alt="Структура отрасли" /><br>Структура<br>отрасли</a>
			</div>
			<div class="col-sm-1  col-xs-2" id="headerurl">
				<a title="Перейти по ссылке" href="http://www.tvel.ru/wps/wcm/connect/tvel/tvelsite/about/structure/" target="_blank"><img src="images/headers/tvel.jpg" heihht="34px" alt="Структура отрасли" /><br>Структура<br>ТВЭЛ</a>
			</div>
			<div class="col-sm-1  col-xs-3" id="headerurl">
				<a title="Перейти по ссылке" href="http://www.russianatom.ru/" target="_blank"><img src="images/headers/obstanovka.jpg" heihht="34px" alt="Структура отрасли" /><br>Радиационная<br>обстановка</a>
			</div>
			<div class="col-sm-3 col-xs-5">
				<jdoc:include type="modules" name="position-0" style="none" /> <!--Подключение модулей-->
			</div>
		</div>


	<?php if ($this->countModules('position-1')) : ?> <!--Проверка наличия модуля меню-->
		<div class="row">
		<!--Меню (см. http://getbootstrap.com => Components => Navbar (http://getbootstrap.com/components/#navbar))-->	
		<!--<nav class="navbar navbar-default" id="mainmenu">-->
		
		<!--Прикрепление меню к верхней части страницы-->
		<!--Зафиксировать меню при прокрутке (https://itchief.ru/lessons/bootstrap-3/38-bootstrap-3-navigation-menu)-->

		<?php if ($this->params->get('menusticky') == 1) : ?> <!--Зафиксировать меню, в зависимости от настроек шаблона-->
			<!--<?php $menuClass //= $menuClass  . " navbar-static-top" . '"' . ' data-spy=' . '"affix"' . ' data-offset-top=' . '"176' ?>-->	
			<?php $menuClass = $menuClass  . " navbar-static-top" . '"' . ' data-spy=' . '"affix"' . ' data-offset-top=' . '"' . $this->params->get('dataoffsettop')?>
		<?php endif; ?>

		<nav class="navbar <?php echo $menuClass;?>" id="mainmenu"> <!--меню, в зависимости от настройки шаблона (настройка стилядля меню)-->
		
		
		<!--<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">-->
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">-->
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topmenu" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <!--<a class="navbar-brand" href="#">Brand</a>-->
		      <!-- Бренд или название сайта (отображается в левой части меню) -->
		      <!--<a class="navbar-brand" href="#">myspace</a>-->
		      <!--В качестве бренда можно использовать не только текст, но и изображение (img)-->
		      <?php if ($this->params->get('menulogoFile')) : ?>
			  <a class="navbar-brand" href="/">
				  <!--<img src="templates/myspace/images/logo.png" height="36" alt="myspace">-->
				  <img src="<?php echo $this->params->get('menulogoFile'); ?>" height="36" alt="<?php echo $this->params->get('sitename'); ?>">
			  </a>
			  <?php endif; ?>
			  <!-- Надпись в меню правее брэнда (отображается в мобильной версии) -->
			  <p class="navbar-text visible-xs-block hidden-sm, hidden-md, hidden-lg"><?php echo $this->params->get('headername'); ?></p>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <!--Мобильное меню-->
		    <!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
		    <div class="collapse navbar-collapse" id="topmenu">
		      <!--<ul class="nav navbar-nav">
		        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">Link</a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">One more separated link</a></li>
		          </ul>
		        </li>
		      </ul>
		      <form class="navbar-form navbar-left">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">Submit</button>
		      </form>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#">Link</a></li>
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li role="separator" class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		          </ul>
		        </li>
		      </ul>-->

				<!--Подключаем меню динамическим способом-->
				<jdoc:include type="modules" name="position-1" style="none" /> <!--Подключение модулей-->

		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		</div>
	<?php endif; ?>

		<!--Слайдер-->
		<!--<div class="row">-->
	<?php if ($this->countModules('position-5')) : ?> <!--Проверка наличия модуля-->
		<div class="row" id="slider"> <!--Присваиваем идентификатор для создания в CSS отступа контента от слайдера-->
			<!--Слайдер-->
			<div class="col-xs-12">
				<jdoc:include type="modules" name="position-5" style="none" /> <!--Подключение модулей-->
			</div>
		</div>
	<?php endif; ?>

		<div class="row">
			<!--Контент сайта-->
			<?php if ($this->countModules('position-8')) : ?> <!--Проверка наличия модуля-->
			<div class="col-md-3">
				<!--Левый сайдбар-->
				<!--<jdoc:include type="modules" name="position-8" style="xhtml" />--> <!--Подключение модулей-->
				<jdoc:include type="modules" name="position-8" style="mystyle" /> <!--Подключение модулей, указываем стиль из файла "myspace\templates\myspace\html\modules.php"-->
			</div>
			<?php endif; ?>
			<div class="<?php echo $span; ?>" id="content"> <!--Вывод ширины текстового блока из переменной $this-->
				<div id="content-inner">
					<!--Контент-->
					<jdoc:include type="message" /> <!--Системные сообщения при регистрации и т.п. в блоке на сайте-->
					<jdoc:include type="component" /> <!--Размещение компонентов Joomla в блоке на сайте-->					
				</div>
			</div>
			<?php if ($this->countModules('position-7')) : ?> <!--Проверка наличия модуля-->
			<div class="col-md-3">
				<!--Правый сайдбар-->
				<jdoc:include type="modules" name="position-7" style="mystyle" /> <!--Подключение модулей, указываем стиль из файла "myspace\templates\myspace\html\modules.php"-->
			</div>
			<?php endif; ?>
		</div>
	</div>
	<div class="container-fluid" id="footer"> <!--Футер, во всю ширину сайта-->
		<div class="row"> 
			<div class=".hidden-xs col-sm-2 col-xs-12" id="informer">
				<p>
				  <!--Yandex.Metrika--> <!--Вывод счетчиков (информера), скрывающихся при отображении на мобильных устройствах (.hidden-xs)-->
			      <?php if ($this->params->get('metrika')) : ?>
					  <?php echo $this->params->get('metrika'); ?>
				  <?php endif; ?>
				</p>
			</div>
			<div class="col-sm-9 col-xs-12"> <!--При отображении на мобильном устройстве - на всю ширину, при отображении на компьютере - оставшаяся область от счетчика-->
				<!--Вывод нижнего меню сайта-->
				<jdoc:include type="modules" name="position-9" style="none" /> <!--Подключение модулей-->
				<!--Вывод футера-->
					<noindex><a title="Посетить сайт rosatom.ru" href="http://rosatom.ru" target="_blank" rel="nofollow"> <img src="images/otrasl/rosatom.png" alt="Росатом" /></a></noindex>
					<noindex><a title="Посетить сайт tvel.ru" href="http://tvel.ru" target="_blank" rel="nofollow"><img src="images/otrasl/tvel.png" alt="ТВЭЛ" /></a></noindex>
					<noindex><a title="Посетить сайт elemash.ru" href="http://elemash.ru" target="_blank" rel="nofollow"><img src="images/otrasl/elemash.png" alt="ЭЛЕМАШ" /></a></noindex>
					<p>
						&nbsp Copyright &copy; 2009-<?php echo date('Y'); ?>. <?php echo $sitename; ?>.
						All Rights Reserved. <a target="_blank" href="https://mszs.ru/">Design by Sergey Mayorov</a>.	
					</p>
			</div>
			<div class="col-sm-1 col-xs-12" id=footertop> <!--При отображении на мобильном устройстве - на всю ширину, при отображении на компьютере - оставшаяся область от счетчика-->
				<a href="#">
					Наверх
				</a>
			</div>

		</div>
	</div>
</body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.1" type="template" client="site">
	<name>myspace</name>
	<version>1.1</version>
	<creationDate>7/11/2017</creationDate>
	<author>Sergey Mayorov</author>
	<authorEmail>sergey-911@mail.ru</authorEmail>
	<copyright>Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.</copyright>
	<description>TPL_MYSPACE_XML_DESCRIPTION</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>css</folder>
		<folder>html</folder>
		<folder>images</folder>
		<folder>js</folder>
		<folder>language</folder>
		<folder>fonts</folder>
	</files>
	<positions>
		<position>position-0</position>
		<position>position-1</position>
		<position>position-2</position>
		<position>position-3</position>
		<position>position-4</position>
		<position>position-5</position>
		<position>position-7</position>
		<position>position-8</position>
		<position>position-9</position>
	</positions>
	<languages folder="language">
		<language tag="en-GB">en-GB/en-GB.tpl_myspace.ini</language>
		<language tag="en-GB">en-GB/en-GB.tpl_myspace.sys.ini</language>
		<language tag="ru-RU">ru-RU/ru-RU.tpl_myspace.ini</language>
		<language tag="ru-RU">ru-RU/ru-RU.tpl_myspace.sys.ini</language>
	</languages>
	<config>
		<fields name="params">
			<fieldset name="advanced">
			
				<field name="sitename"  type="text" default="myspace"
					label="JGLOBAL_TITLE"
					description="JFIELD_ALT_PAGE_TITLE_LABEL"
					filter="string" />

				<field name="menuStyle" type="list" default="0" label="Стиль для меню" description="Выберите тему для главного меню">
				  	<option value="0">По умолчанию</option>
				  	<option value="1">Красная</option>
				  	<option value="2">Пурпурная</option>
				</field>

				<field name="headername" type="text" default="Название сайта"
					label="Название сайта"
					description="Название, отображаемое в шапке сайта"
					filter="string" />

				<field 
					name="headerwithlink"
					type="radio"
					label="Название - ссылка"
					description="Отображение названия сайта в виде ссылки"
					class="btn-group btn-group-yesno"
					default="1"
					>
					<option value="1">Да</option>
					<option value="0">Нет</option>
				</field>

				<field name="headerdescription" type="text" default="Описание сайта"
					label="Описание сайта"
					description="Описание, отображаемое в шапке сайта"
					filter="string" />

				<field 
					name="descriptionwithlink"
					type="radio"
					label="Описание - ссылка"
					description="Отображение описания сайта в виде ссылки"
					class="btn-group btn-group-yesno"
					default="0"
					>
					<option value="1">Да</option>
					<option value="0">Нет</option>
				</field>

				<field 
					name="headertransition"
					type="radio"
					label="Вращение надписей"
					description="Вращение надписей (если они в виде ссылки) в шапке сайта при наведении мышки"
					class="btn-group btn-group-yesno"
					default="0"
					>
					<option value="1">Да</option>
					<option value="0">Нет</option>
				</field>

				<field 
					name="headerlogoFile" 
					type="media" 
					label="Логотип сайта"
					description="Логотип, отображаемый в шапке сайта" 
					class="" 
					default=""
				/>

				<field 
					name="headersocial"
					type="radio"
					label="Социальные кнопки"
					description="Отображать социальные кнопки в шапке сайта"
					class="btn-group btn-group-yesno"
					default="0"
					>
					<option value="1">Да</option>
					<option value="0">Нет</option>
				</field>

				<field 
					name="menulogoFile" 
					type="media" 
					label="Логотип меню"
					description="Логотип, отображаемый в меню сайта" 
					class="" 
					default=""
				/>

				<field 
					name="menusticky"
					type="radio"
					label="Фиксированное меню"
					description="Фиксированное (плавающее) меню"
					class="btn-group btn-group-yesno"
					default="0"
					>
					<option value="1">Да</option>
					<option value="0">Нет</option>
				</field>

				<field name="dataoffsettop"  type="integer" default="169"
					label="Отступ"
					description="Отступ до меню, равный величине хедера"
					first="1" last="1000" step="1"
					filter="integer" />

				<field 
					name="fonFile" 
					type="media" 
					label="Фоновый рисунок сайта"
					description="Файл с рисунком, отображаемый в качестве фона сайта" 
					class="" 
					default=""
				/>

				<field 
					name="metrika" 
					type="textarea" 
					label="Yandex.Metrika"
					description="Счетсики Яндекса (Yandex.Metrika informer и Yandex.Metrika informer)" 
					rows="10" cols="200"
					class="" 
					default=""
					filter="raw" />

			</fieldset>
		</fields>
	</config>
</extension>

options.running = toHide.size() == 0 ? toShow.size() : toHide.size();

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
  $j(".content").hide();
    $j(".heading").click(function()
  {
    $j(this).next(".content").slideToggle(500);
  });
});
</script>

<div class="layer">
<p class="heading">Заголовок на котором щелкаем</p>
<div class="content">
<p>Содержание, которое показывается/скрывается по щелчку</p>
</div>
</div>

<div class="panel-group" id="accordion">
  <!-- 1 панель -->
  <div class="panel panel-default">
    <!-- Заголовок 1 панели -->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Bootstrap 3 - Введение</a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <!-- Содержимое 1 панели -->
      <div class="panel-body">
        <p>Bootstrap 3 - это framework для быстрого и гармоничного создания дизайна сайта. Начать изучать эту технологию лучше с <a href="http://itchief.ru/lessons/bootstrap-3/19-introduction-to-twitter-bootstrap-3" target="_blank">урока</a>, который познакомит вас с её возможностями и преимуществами.</p>
      </div>
    </div>
  </div>
  <!-- 2 панель -->
  <div class="panel panel-default">
    <!-- Заголовок 2 панели -->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Bootstrap 3 - Начало работы</a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <!-- Содержимое 2 панели -->
      <div class="panel-body">
        <p>Изучение технологии лучше всего начать с простого <a href="http://itchief.ru/lessons/bootstrap-3/20-lesson-2-getting-started-with-twitter-bootstrap-3" target="_blank">урока</a>. На котором изучается как подключить Twitter Bootstrap к своему проекту и вывести с помощью него простейший текст.</p>
      </div>
    </div>
  </div>
  <!-- 3 панель -->
  <div class="panel panel-default">
    <!-- Заголовок 3 панели -->
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Bootstrap 3 - Создание сайта</a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <!-- Содержимое 3 панели -->
      <div class="panel-body">
        <p>Создание сайта - это трудоемкий процесс, который состоит из нескольких этапов. В качестве примера рассмотрим создание сайта визитки на этом <a href="http://itchief.ru/lessons/bootstrap-3/website-creation-business-cards-(part-1)" target="_blank">уроке</a>, в котором рассмотрим процесс загрузки необходимых пакетов и проектирования макета сайта.</p>
      </div>
    </div>
  </div>
</div>