BBQ, jQueryUI Accordion, and Cycle2 integration

This fiddle integrates the jQueryUI accordion, Cycle2, and BBQ plugins to allow multiple slideshows to exist inside accordion panels - while allowing individual slides to be bookmarked/shared.

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.ba-bbq/1.2.1/jquery.ba-bbq.min.js"></script>
			<p>You are here: <span id="here"></span></p>
			<div id="accordion">
				<h3>Zero</h3>
				<div class="accord">
					<div class="panel a">0</div>
					<div id="a">
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a2"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a3"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="a4"></div>
					</div>
					<ul class="control" data-show="a">
						<li><a class="b">back</a></li>
						<li><a class="f">fwd</a></li>
					</ul>
				</div>
				<h3>One</h3>
				<div class="accord">
					<div class="panel b">0</div>
					<div id="b">
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a2"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a3"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="a4"></div>
					</div>
					<ul class="control" data-show="b">
						<li><a class="b">back</a></li>
						<li><a class="f">fwd</a></li>
					</ul>
				</div>
				<h3>Two</h3>
				<div class="accord">
					<div class="panel c">0</div>
					<div id="c">
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a2"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a3"></div>
						<div class="slide"><img src="http://jquery.malsup.com/cycle2/images/p4.jpg"...

CSS

#a,
#b,
#c {
	width: 320px;
}
.accord {
	padding: 0.5em;
}
.slide {
	width: 100%;
	background: #ccc;
	height: 240px;
}
.slide img {
	width: 320px;
	height: 240px;
}
.controls {
	display: flex;
}
.controls a {
	display: block;
	flex: 1;
}
.p {
	padding: 10px;
	background: #343b43;
	opacity: 0.5;
	z-index: 101;
	color: white;
}
.n {
	padding: 10px;
	background: #343b43;
	opacity: 0.5;
	z-index: 101;
	color: white;
	text-align: right;
}
.p:hover,
.p:focus,
.n:hover,
.n:focus {
	opacity: 1.0;
}

#slideshow {
	display: flex;
	flex-flow: row nowrap;
}
#slideshow .show {
	flex: 1;
	border: 1px solid green;
}
.panel {
	background: #eaeaea;
	text-align: center;
	padding: 0.5em;
	font-weight: bold;
	width: 304px;
}

#controls {
	display: flex;
	flex-flow: row nowrap;
}
#controls .control {
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
}
#controls .control li {
	flex: 1;
	text-align: center;
}

ul.control {
	width: 320px;
	display: flex;
	flex-flow: nowrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.control li {
	flex: 1;
}
ul.control a {
	display: block;
	padding: 0.5em;
	background: #ccc;
	text-align: center;
	font-weight: bold;
}
a.b:before {
	content: '< ';
}
a.f:after {
	content: ' >';
}
ul.control a:hover,
ul.control a:focus {
	background: #333;
	color: #fff;
}

JavaScript

var theA, theB, theC;
var x = $.bbq.getState();
if (x.slide === undefined) {
    theA = 0;
    theB = 0;
    theC = 0;
} else {
    var theSlide = x.slide;
    var theTempShow = theSlide.substring(0, 1);
    var theTempSlide = theSlide.substring(1, 2);
    if (theTempShow == "a") {
        theA = theTempSlide;
    } else if (theTempShow == "b") {
        theB = theTempSlide;
    } else if (theTempShow == "c") {
        theC = theTempSlide;
    }
}
var intFold = parseInt(x.active,10);

$("#accordion").accordion({
    active: intFold,
    heightStyle: "content",
    activate: function (event, ui) {
        var active = $("#accordion").accordion('option', 'active');
        $.bbq.pushState({'active': active}, 0);
        if (active === 0) {
            theSlide = 'a' + $("#a").data("cycle.opts").currSlide;
        } else if (active == 1) {
            theSlide = 'b' + $("#b").data("cycle.opts").currSlide;
        } else if (active == 2) {
            theSlide = 'c' + $("#c").data("cycle.opts").currSlide;
        }
        $.bbq.pushState({'slide': theSlide}, 0);
    }
});

$("#a").cycle({
    timeout: 0,
    slides: '> div.slide',
    startingSlide: theA
});

$("#b").cycle({
    timeout: 0,
    slides: '> div.slide',
    startingSlide: theB
});

$("#c").cycle({
    timeout: 0,
    slides: '> div.slide',
    startingSlide: theC
});

$(window).bind('hashchange', function () {
    var x = $.bbq.getState();
    $("#here").text(window.location);
    var a = $("#a").data("cycle.opts").currSlide;
    $(".panel.a").text(a);
    var b = $("#b").data("cycle.opts").currSlide;
    $(".panel.b").text(b);
    var c = $("#c").data("cycle.opts").currSlide;
    $(".panel.c").text(c);
    if (x.active === undefined) {
        $("#accordion").accordion('option', 'active', 0);
    } else {
        $("#accordion").accordion('option', 'active', x.active);
    }
});

// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the...