No notes defined.
{% extends '_preview.twig' %}
{% block content %}
<div class="container">
<div class="preview-container">
{% if _target.isCollated %}
<dl class="styleguide">
{{ yield | raw }}
</dl>
{% else %}
<div class="content-container">
{{ yield | raw }}
</div>
{% endif %}
<p class="form-disclaimer">The accordion component uses the hash in you URL to show the relevant content.<br>
The below table of contents is not part of the accordion template,
but allows you to play with this hash functionality.</p>
{% include '@table-of-contents' with {
list: [
'<a href="#accordion--single--content--1">single accordion</a>',
'<a href="#accordion--multiple--content--1">first item</a>',
'<a href="#accordion--multiple--content--2">second item</a>',
'<a href="#accordion--multiple--content--3">third item</a>',
'<a href="#accordion--multiple--content--4">forth item</a>',
'<a href="#just_some_random_hash">non existing item</a>'
]
} %}
</div>
</div>
{% endblock %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Preview Layout</title>
<link media="all" rel="stylesheet" href="../../styleguide/vendor/baguettebox/dist/baguetteBox.min.css">
<link media="all" rel="stylesheet" href="../../css/main.css">
<link media="all" rel="stylesheet" href="../../css/styleguide.css">
<link rel="apple-touch-icon" sizes="180x180" href="../../styleguide/img/favicon/build/cyan/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../styleguide/img/favicon/build/cyan/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../styleguide/img/favicon/build/cyan/favicon-16x16.png">
<link rel="manifest" href="../../styleguide/img/favicon/build/cyan/site.webmanifest">
<link rel="mask-icon" href="../../styleguide/img/favicon/build/cyan/safari-pinned-tab.svg" color="#009DE0">
<meta name="msapplication-TileColor" content="#009DE0">
<meta name="theme-color" content="#009DE0">
<!-- webfontLoader --><!--
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Fira Sans:400,600,700']
}
});
</script>
-->
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="cs--cyan">
<a href="#main-content" class="skiplink">
Skip to main content
</a>
<div id="main-content">
<div class="container">
<div class="preview-container">
<div class="content-container">
</div>
<p class="form-disclaimer">The accordion component uses the hash in you URL to show the relevant content.<br>
The below table of contents is not part of the accordion template,
but allows you to play with this hash functionality.</p>
<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
<div class="content-container">
<h2 id="table-of-contents-header" class="visually-hidden">Table of content</h2>
<ul class="inline">
<li><a href="#accordion--single--content--1">single accordion</a></li>
<li><a href="#accordion--multiple--content--1">first item</a></li>
<li><a href="#accordion--multiple--content--2">second item</a></li>
<li><a href="#accordion--multiple--content--3">third item</a></li>
<li><a href="#accordion--multiple--content--4">forth item</a></li>
<li><a href="#just_some_random_hash">non existing item</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- hidden fields for screenreaders -->
<span hidden id="image-gallery__open-gallery">open gallery</span>
<!-- scripts -->
<script type="text/javascript" src="../../styleguide/vendor/baguettebox/src/baguetteBox.js"></script>
<script type="text/javascript" src="../../styleguide/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../styleguide/vendor/masonry-layout/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="../../styleguide/vendor/allietabs/allieTabs.min.js"></script>
<script type="text/javascript" src="../../styleguide/vendor/modal/index.js"></script>
<script type="text/javascript" src="../../styleguide/js/accordion.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/checkbox_filter.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/checkbox_dynamic.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/table.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/file.functions-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/breadcrumbs.functions-min.js"></script>
<!-- JS bindings -->
<script type="text/javascript" src="../../styleguide/js/image-collections.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/image-wall.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/accordion.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/menu.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/checkbox_filter.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/checkbox_dynamic.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/filter.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/modal.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/table.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/file.bindings-min.js"></script>
<script type="text/javascript" src="../../styleguide/js/breadcrumbs.bindings-min.js"></script>
<script>
var cs = getCookie('cs');
if (cs) {
document.body.className = cs;
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return null;
}
</script>
</body>
</html>
/* No context defined. */