<div id="randomstring" class="atozblock-container show-single mb-md">
<div class="row mb-md">
<div class="col-12">
<div class="mw-730">
<h2 class="heading-level-2 mb-md">A till Z</h2>
<ul class="d-flex mb-0 flex-wrap flex-row list-unstyled align-content-stretch">
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-A" class="button-small atozblockbuttons ">
A
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-B" class="button-small atozblockbuttons ">
B
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-C" class="button-small atozblockbuttons disabled " disabled>
C
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-D" class="button-small atozblockbuttons ">
D
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-E" class="button-small atozblockbuttons selected">
E
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-F" class="button-small atozblockbuttons ">
F
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-G" class="button-small atozblockbuttons ">
G
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-H" class="button-small atozblockbuttons ">
H
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-I" class="button-small atozblockbuttons disabled " disabled>
I
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-J" class="button-small atozblockbuttons ">
J
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-K" class="button-small atozblockbuttons ">
K
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-L" class="button-small atozblockbuttons ">
L
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-M" class="button-small atozblockbuttons ">
M
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-N" class="button-small atozblockbuttons disabled " disabled>
N
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-O" class="button-small atozblockbuttons ">
O
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-P" class="button-small atozblockbuttons disabled " disabled>
P
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-Q" class="button-small atozblockbuttons ">
Q
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-R" class="button-small atozblockbuttons ">
R
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-S" class="button-small atozblockbuttons ">
S
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-T" class="button-small atozblockbuttons ">
T
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-U" class="button-small atozblockbuttons ">
U
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-V" class="button-small atozblockbuttons ">
V
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-W" class="button-small atozblockbuttons ">
W
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-X" class="button-small atozblockbuttons ">
X
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-Y" class="button-small atozblockbuttons ">
Y
</button>
</li>
<li class="mr-xs mb-xs">
<button type="button" href="#randomstring-Z" class="button-small atozblockbuttons ">
Z
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="atozblock w-100 mw-920">
<div id="randomstring-A" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-A" aria-expanded="true" aria-controls="id-randomstring-A">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
A
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-A" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-A">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>Alla1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>Alla2</u></a>
<small class="mb-0">Extra info</small>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>Alla3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-B" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-B" aria-expanded="true" aria-controls="id-randomstring-B">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
B
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-B" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-B">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>B - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>B - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>B - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-C" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-C" aria-expanded="true" aria-controls="id-randomstring-C">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
C
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-C" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-C">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>C - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>C - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>C - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-D" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-D" aria-expanded="true" aria-controls="id-randomstring-D">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
D
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-D" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-D">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>D - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>D - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>D - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-E" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-E" aria-expanded="true" aria-controls="id-randomstring-E">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
E
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-E" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-E">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>E - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>E - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>E - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-F" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-F" aria-expanded="true" aria-controls="id-randomstring-F">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
F
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-F" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-F">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>F - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>F - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>F - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-G" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-G" aria-expanded="true" aria-controls="id-randomstring-G">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
G
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-G" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-G">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>G - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>G - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>G - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="randomstring-H" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center" id="randomstring-heading" data-toggle="collapse" data-target="#id-randomstring-H" aria-expanded="true" aria-controls="id-randomstring-H">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
H
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-randomstring-H" class="panel-collapse collapse show" aria-labelledby="randomstring-heading" data-parent="#id-randomstring-H">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>H - 1</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>H - 2</u></a>
</li>
<li class="d-flex flex-column">
<a class="mb-xxs" href="/nåt" target=""><u>H - 3</u></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="{{ uniqueId }}" class="atozblock-container {{#if showSingleLetter}}show-single{{/if}} mb-md">
<div class="row mb-md">
<div class="col-12">
<div class="mw-730">
<h2 class="heading-level-2 mb-md">{{title}}</h2>
<ul class="d-flex mb-0 flex-wrap flex-row list-unstyled align-content-stretch">
{{#letters}}
<li class="mr-xs mb-xs">
<button type="button" href="#{{../uniqueId}}-{{letter}}"
class="button-small atozblockbuttons {{#unless exists}}disabled{{/unless}} {{#if selected}}selected{{/if}}"
{{#unless exists}}disabled{{/unless}}>
{{letter}}
</button>
</li>
{{/letters}}
</ul>
</div>
</div>
</div>
<div class="row">
<div class="atozblock w-100 mw-920">
{{#items}}
<div id="{{../uniqueId}}-{{letter}}" class="atozblock--accordion">
<div class="atozblock--card">
<div class="atozblock--header panel-heading active d-flex align-items-center"
id="{{../uniqueId}}-heading" data-toggle="collapse" data-target="#id-{{../uniqueId}}-{{letter}}"
aria-expanded="true" aria-controls="id-{{../uniqueId}}-{{letter}}">
<div class="d-flex row w-100 mw-730 justify-content-between">
<div class="d-flex col-10 align-items-center">
<h3 class="heading-level-5 mb-0 atozblock--title">
{{letter}}
</h3>
</div>
<div class="col-2 atozblock--arrow">
</div>
</div>
</div>
<div id="id-{{../uniqueId}}-{{letter}}" class="panel-collapse collapse show"
aria-labelledby="{{../uniqueId}}-heading" data-parent="#id-{{../uniqueId}}-{{letter}}">
<div class="atozblock--body mw-730 row">
<ul class="list-unstyled mb-0 col-12">
{{#links}}
<li class="d-flex flex-column">
<a class="mb-xxs" href="{{url}}" target="{{target}}"><u>{{text}}</u></a>
{{#if info}}
<small class="mb-0">{{{info}}}</small>
{{/if}}
</li>
{{/links}}
</ul>
</div>
</div>
</div>
</div>
{{/items}}
</div>
</div>
</div>
{
"epiDivClass": "col-md-12",
"title": "A till Z",
"uniqueId": "randomstring",
"letters": [
{
"letter": "A",
"exists": true
},
{
"letter": "B",
"exists": true
},
{
"letter": "C",
"exists": false
},
{
"letter": "D",
"exists": true
},
{
"letter": "E",
"exists": true,
"selected": true
},
{
"letter": "F",
"exists": true
},
{
"letter": "G",
"exists": true
},
{
"letter": "H",
"exists": true
},
{
"letter": "I",
"exists": false
},
{
"letter": "J",
"exists": true
},
{
"letter": "K",
"exists": true
},
{
"letter": "L",
"exists": true
},
{
"letter": "M",
"exists": true
},
{
"letter": "N",
"exists": false
},
{
"letter": "O",
"exists": true
},
{
"letter": "P",
"exists": false
},
{
"letter": "Q",
"exists": true
},
{
"letter": "R",
"exists": true
},
{
"letter": "S",
"exists": true
},
{
"letter": "T",
"exists": true
},
{
"letter": "U",
"exists": true
},
{
"letter": "V",
"exists": true
},
{
"letter": "W",
"exists": true
},
{
"letter": "X",
"exists": true
},
{
"letter": "Y",
"exists": true
},
{
"letter": "Z",
"exists": true
}
],
"items": [
{
"letter": "A",
"links": [
{
"url": "/nåt",
"text": "Alla1"
},
{
"url": "/nåt",
"text": "Alla2",
"info": "Extra info"
},
{
"url": "/nåt",
"text": "Alla3"
}
]
},
{
"letter": "B",
"links": [
{
"url": "/nåt",
"text": "B - 1"
},
{
"url": "/nåt",
"text": "B - 2"
},
{
"url": "/nåt",
"text": "B - 3"
}
]
},
{
"letter": "C",
"links": [
{
"url": "/nåt",
"text": "C - 1"
},
{
"url": "/nåt",
"text": "C - 2"
},
{
"url": "/nåt",
"text": "C - 3"
}
]
},
{
"letter": "D",
"links": [
{
"url": "/nåt",
"text": "D - 1"
},
{
"url": "/nåt",
"text": "D - 2"
},
{
"url": "/nåt",
"text": "D - 3"
}
]
},
{
"letter": "E",
"links": [
{
"url": "/nåt",
"text": "E - 1"
},
{
"url": "/nåt",
"text": "E - 2"
},
{
"url": "/nåt",
"text": "E - 3"
}
]
},
{
"letter": "F",
"links": [
{
"url": "/nåt",
"text": "F - 1"
},
{
"url": "/nåt",
"text": "F - 2"
},
{
"url": "/nåt",
"text": "F - 3"
}
]
},
{
"letter": "G",
"links": [
{
"url": "/nåt",
"text": "G - 1"
},
{
"url": "/nåt",
"text": "G - 2"
},
{
"url": "/nåt",
"text": "G - 3"
}
]
},
{
"letter": "H",
"links": [
{
"url": "/nåt",
"text": "H - 1"
},
{
"url": "/nåt",
"text": "H - 2"
},
{
"url": "/nåt",
"text": "H - 3"
}
]
}
],
"showSingleLetter": true
}
$(document).ready(function() {
var buttons = $("button.atozblockbuttons");
$(".panel-collapse").on("show.bs.collapse", function() {
$(this).siblings(".panel-heading").addClass("active");
});
$(".panel-collapse").on("hide.bs.collapse", function() {
$(this).siblings(".panel-heading").removeClass("active");
});
$("button.atozblockbuttons").on('click', function() {
var scope = $(this).closest('.atozblock-container');
var url = $(this).attr('href');
if($(this).closest('.atozblock-container').hasClass('show-single')) {
if($(this).hasClass('selected')) {
$(this).removeClass("selected");
$('.atozblock--accordion', scope).show();
} else {
$(buttons, scope).removeClass("selected");
$(this).addClass("selected");
$('.atozblock--accordion', scope).hide();
$(url).show();
}
} else {
$(buttons, scope).removeClass("selected");
$(this).addClass("selected");
$('html, body').animate({
scrollTop: $(url).offset().top
}, 1000);
}
});
});
button {
&.atozblockbuttons {
&:disabled {
background: #eee;
}
&.selected {
background: white;
border: 1px solid $blue;
color: $blue;
}
background: $blue;
color: white;
&:hover {
background: #1a4e83;
color: white;
}
}
}
.atozblock {
ul {
margin-bottom: 0px;
}
a.disabled {
pointer-events: none;
cursor: default;
}
a {
u {
color: $blue;
}
}
.panel-heading{
&.active{
.atozblock--arrow {
font-family: "Material Icons";
position: relative;
&::after {
color: $dark-grey;
font-family: "Material Icons";
content: "\e316";
font-size: 32px;
line-height: 32px;
position: absolute;
right: 50%;
top: 50%;
margin-right: -16px;
margin-top: -16px;
}
}
}
&.collapsed{
.atozblock--arrow {
font-family: "Material Icons";
position: relative;
&::after {
color: $dark-grey;
font-family: "Material Icons";
content: "\e313";
font-size: 32px;
line-height: 32px;
position: absolute;
right: 50%;
top: 50%;
margin-right: -16px;
margin-top: -16px;
}
}
}
}
.atozblock--accordion {
background-color: $bg-grey;
box-shadow: $box-shadow-small;
.atozblock--body {
padding-bottom: 50px;
padding-top: 30px;
ul {
li {
margin-bottom: $xs-space;
a {
margin-bottom: 0px;
}
&:last-child {
margin-bottom: 0px;
a {
margin-bottom: 0px;
}
}
}
}
}
.panel-heading {
&.active {
background: $bg-grey;
}
}
.atozblock--header {
box-shadow: $box-shadow-small;
margin-bottom: 0px;
cursor: pointer;
min-height: 70px;
background-color: $white;
&.collapsed {
border-top: #ddd;
}
&>div {
height:70px;
}
}
}
}
There are no notes for this item.