<div class="block-header">
<h2 class="heading-level-2">Mina Interna sidor</h2>
</div>
<div class="list-block-wrapper">
<ul class="personalized-page-list-block">
<header class="personalized-page-list-block-header toggle">
<h3 class="heading-level-3">Internt KOM</h3>
<a class="arrow_up_down" href="javascript:void(0)">
<i class="material-icons">keyboard_arrow_down</i>
</a>
</header>
<ul class="inner">
<li>
<a title="Bildbanken" href="www.google.se">Bildbanken</a>
</li>
<li>
<a title="Forskningskommunikation" href="www.google.se">Forskningskommunikation</a>
</li>
<li>
<a title="Kommunikationsstöd" href="www.google.se">Kommunikationsstöd</a>
</li>
</ul>
</ul>
<ul class="personalized-page-list-block">
<header class="personalized-page-list-block-header toggle">
<h3 class="heading-level-3">Webbredaktör</h3>
<a class="arrow_up_down" href="javascript:void(0)">
<i class="material-icons">keyboard_arrow_down</i>
</a>
</header>
<ul class="inner">
<li>
<a title="Support" href="www.google.se">Support</a>
</li>
<li>
<a title="Stöd" href="www.google.se">Stöd</a>
</li>
</ul>
</ul>
</div>
{{#if title}}
<div class="block-header">
<h2 class="heading-level-2">{{title}}</h2>
</div>
{{/if}}
{{#if section}}
<div class="list-block-wrapper">
{{#each section}}
<ul class="personalized-page-list-block">
<header class="personalized-page-list-block-header toggle">
{{#if title}}
<h3 class="heading-level-3">{{title}}</h3>
{{/if}}
<a class="arrow_up_down" href="javascript:void(0)">
<i class="material-icons">keyboard_arrow_down</i>
</a>
</header>
{{#if items}}
<ul class="inner">
{{#each items}}
<li>
<a title="{{title}}" href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{/if}}
</ul>
{{/each}}
</div>
{{/if}}
{
"title": "Mina Interna sidor",
"epiDivClass": "col-md-8 offset-md-2",
"section": [
{
"title": "Internt KOM",
"items": [
{
"title": "Bildbanken",
"url": "www.google.se"
},
{
"title": "Forskningskommunikation",
"url": "www.google.se"
},
{
"title": "Kommunikationsstöd",
"url": "www.google.se"
}
]
},
{
"title": "Webbredaktör",
"items": [
{
"title": "Support",
"url": "www.google.se"
},
{
"title": "Stöd",
"url": "www.google.se"
}
]
}
]
}
$('.toggle').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.find(".arrow_up_down").toggleClass("opened");
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
ul {
&.personalized-page-list-block{
&:last-child{
margin-bottom: $md-space;
}
list-style: none;
padding: 0;
margin-bottom: 0px;
.personalized-page-list-block-header{
display: flex;
flex-direction: row;
cursor: pointer;
justify-content: space-between;
padding: $xs-space 0 $xs-space 0;
border-top: 1px solid $grey-border;
h3{
margin-bottom: 0px;
}
.arrow_up_down{
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
text-decoration: none;
transform: rotate(0deg);
transform-origin: center;
transition: all 0.3s ease-in-out;
will-change: transform;
&:hover{
text-decoration: none;
}
&.opened{
transform: rotate(180deg)
}
i{
font-size: 32px;
line-height: 32px;
}
}
}
.inner {
border-top: 1px solid $grey-border;
overflow: hidden;
display: none;
list-style: none;
padding: $sm-space;
background-color: $bg-grey;
&.show {
/*display: block;*/
}
}
li {
margin: .5em 0;
a.toggle {
width: 100%;
display: block;
background: rgba(0,0,0,0.78);
color: #fefefe;
padding: .75em;
border-radius: 0.15em;
transition: background .3s ease;
will-change: transform;
&:hover {
background: rgba(0, 0, 0, 0.9);
}
}
}
}
}
.single-link {
border-top: 1px solid $grey-border;
&:first-child{
border-top: none;
}
&:last-child {
border-bottom: 1px solid $grey-border;
}
a {
display: block;
padding: 20px 0;
}
}
.pagelistblock{
margin-bottom: $md-space;
}
There are no notes for this item.