JSFiddle - React, Tailwind, and code Playground

by Arthur evans

HTML

<div class="player">
				<div id="audio-opener" class="audio-opener"></div>
			</div>
			
			<div id="jquery_jplayer_1" class="jp-jplayer"></div>
			<div id="jp_container_1" class="jp-audio">
				<div class="jp-type-single">
					<div class="jp-gui jp-interface">
						<ul class="jp-controls">
							<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
							<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
							<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
							<li><a href="#" class="jp-prev" tabindex="1" onClick="prev_song()">prev</a></li>
							<li><a href="#" class="jp-next" tabindex="1" onClick="next_song()">next</a></li>
						</ul>

					</div>
				</div>
			</div>

CSS

.player {
	position: absolute;
	left: 50%;
	width: 638px;
	height: 54px;
	margin-left: -319px;
	background: url(http://kvatromusic.ru/bitrix/templates/html/img/player.png);
}
.player img {
	display: block;	
	position: relative;
}
.audio-opener {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 121px;
	height: 54px;
	background: url(http://kvatromusic.ru/bitrix/templates/html/img/audio_opener.png);
}
.audio-opener.hover {
	display: block;
}
.video-opener {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	width: 121px;
	height: 54px;
	background: url(http://kvatromusic.ru/bitrix/templates/html/img/video_opener.png);
}
.video-opener.hover {
	display: block;
}

JavaScript

$(window).resize(function()
{
	$('.block-content-inner').css('max-height', $('body').height() - 320);
	block = $('.block:visible').eq(0);
	block.css('margin-top', -block.height()/2);
});

function prev_song()
{
	$('#audio-nav .active').prev().find('a').trigger('click');
}

function next_song()
{
	$('#audio-nav .active').next().find('a').trigger('click');
}

$(function()
{
	/* bg */
	$('#page-bg').on('click', function()
	{
		$('#main-nav a').removeClass('active');
		$.fancybox.close();
		$('#audio-nav').hide();
		$('#video-nav').hide();
		$('.sub-nav').hide();
		$('.gallery-nav').hide();
		$('.sub-nav-small').removeClass('sub-nav-small');
		$('#slogan').fadeIn('slow');
	});
	
	/* slogan */
	$('#slogan').fadeIn(3000);
	
	/* main nav */
	$('#main-nav').on('click', 'a', function()
	{
		$('#main-nav a').removeClass('active');
		$.fancybox.close();
		$('#slogan').hide();
		$('#audio-nav').hide();
		$('#video-nav').hide();
		$('.gallery-nav').hide();
		$('.sub-nav-small').removeClass('sub-nav-small');
		$(this).addClass('active');
	});
	
	/* sub nav */
	$('.sub-nav').css('left', '50%').hide();
	$('.sub-nav-opener').on('click', function()
	{
		$('.block').hide();
		$('.sub-nav').hide();
		$($(this).attr('href')).fadeIn('slow');
	});
	
	/* block */
	$('.block').css('left', '50%').hide();
	$('.block-content-inner').css('max-height', $('body').height() - 320);
	$('.block-opener').on('click', function()
	{
		if( $(this).hasClass('active') )
			return false;
			
		$('.block').hide();
		$('.gallery-nav').hide();
		if( $(this).closest('.sub-nav-small').length )
		{
		}
		else if( $(this).closest('.sub-nav').length )
		{
			$(this).closest('.sub-nav').hide();
			$(this).closest('.sub-nav').addClass('sub-nav-small');
			$(this).closest('.sub-nav').fadeIn('slow');
		}
		else
		{
			$('.sub-nav').hide();
			$('.sub-nav').removeClass('sub-nav-small');
		}
		$('.sub-nav a').removeClass('active');
		$(this).addClass('active');
		block =...