Размещение контента:
HTML

Код:
<div id="slidorion">
	<div id="slider">
    <div class="slider-image" rel="section1">
    	<img src="sample.jpg" width="500" height="400" />
    </div>
    <div class="slider-image" rel="section2">
    	<img src="sample.jpg" width="500" height="400" />
    </div>
    <div class="slider-image" rel="section3">
    	<img src="sample.jpg" width="500" height="400" />
    </div>
	</div>
	<div id="accordion">
    <div class="header"><a class="slider-link" rel="section1">Заголовок первого слайда</a></div>
    <div class="content">
    	<!-- Содержание располагается здесь -->
    </div>
    <div class="header"><a class="slider-link" rel="section2">Заголовок второго слайда</a></div>
    <div class="content">
    	<!-- Содержание располагается здесь -->
    </div>
    <div class="header"><a class="slider-link" rel="section3">Заголовок третьего слайда</a></div>
    <div class="content">
    	<!-- Содержание располагается здесь -->
    </div>
	</div>
</div>

Итак, как же это ставить. Для начала подключаются два плагина, позволяющие работать нашему слайдо-аккордеону.
JS (самый верх html-низ или самый верх контейнера страницы)

<script src="https://forumstatic.ru/files/000d/19/7b/61710.js"></script>
<script src="https://forumstatic.ru/files/000d/19/7b/51531.js"></script>

Файлы js-скриптов залиты на форум-полигон, при желании вы можете скачать их (открыть ссылку -> меню браузера -> файл -> сохранить как…) и пересохранить в собственное хранилище форума (администрирование -> файлы)
Дальше у нас идут стилистические изыски. Все с комментариями, в коде есть лишь один сложный момент, который описан ниже.
CSS (верхний html-контейнер, контейнер страницы или без тегов в css-окна)

Код:
<style type="text/css">
/*
Стили для слидриона
 */
#slidorion {
	width: 768px;    	/* Установим ширину контейнера. Равна сумме ширины #slider и #accordion */
	height: 400px;    	/* Установим высоту контейнера. Равна высоте #slider и #accordion */
	position: relative;
	left: 50%;
	margin-left: -384px;
	padding: 10px;
	background: #cbcbcb;
	border: 1px solid #bbb;
	-webkit-box-shadow: 0 0 34px #bbb;
	-moz-box-shadow: 0 0 34px #bbb;
	box-shadow: 0 0 34px #bbb;
}

#slider {
	width: 488px;    	/* ширина контейнера с картинками */
	height: 400px;    	/* Установим его высоту*/
	position: relative;
	float: left;
	overflow: hidden;    /* Скроем прокрутку */
}

.slider-image {
	position: relative;
}

.slider-image img {
	width: 488px;    	/* Ширина картинки*/
	height: 400px;    	/* Высота картинки */
	position: absolute;
}

#accordion {
	width: 280px;    	/* Ширина контейнера с описателем*/
	height: 400px;    	/* высота */
	font-family: Verdana;
	background: #eee;
	-webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
	-moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
	box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
	position: relative;
	z-index:999;
	float: left;
}

#accordion .header {   /* заголовок описания. Сложный стиль */
	height: 36px;
	color: #333;
	background: #ededed;
/* градиентная заливка с css*/
	background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
	background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dcdcdc',GradientType=0 );
/* градиентная заливка с css - конец */
	border: none;
	border-top: 1px solid #ccc;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

#accordion .header a {    /* стиль ссылки внутри заголовка */
	background: none;
	padding: 8px 14px;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
	display: block;
}

#accordion .header a:hover { /* стиль ссылки внутри заголовка при наведении */
	background: #ededed;
	cursor: pointer;
}

#accordion .header a.active {  /* стиль активной ссылки внутри заголовка */
	border-bottom: none;
	background-color: #676767 !important;
	color: #fff;
}

#accordion .content {
	height: 257px;    	/* Эту высоту нужно менять, поскольку она зависит от высоты контейнера с описанием и числа вкладок */
	font-weight: bold;
	font-size: 12px;
	margin: 0;
	padding: 16px;
	border: none;
	background: #d6d6d6;
	background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 );
</style>

Как вычислить высоту #accordion .content:

Код:
Берем высоту контейнера (#accordion height), вычитаем из него помноженную на число вкладок высоту заголовка (#accordion .header height) и делим полученное число на количество вкладок.

И напоследок самое сладкое – инициализатор скрипта. А у него, как у хорошего скрипта, есть чудесное свойство – опции! Вы можете сами настроить автосмену позиций, способ смены картинки и некоторые другие вещи. Но для начала:
JS (html-низ или контейнер страницы)

Код:
<script>
$(document).ready(function(){
	$('#slidorion').slidorion({
                  <!-- Сюда пишем опции. --> 
	});
});
</script>