Christina Riedl
Telefon: 07223 967-326
Telefax: 07223 967-7326
E-Mail: christina.riedl@schoeck.de
Elementbaukasten Akkordeon
Verwendung
Zur übersichtlichen Einbindung v.a. einer großen Anzahl von Inhalten innerhalb einer Seite. Je nach Einsatzzweck ist eine Variante mit oder ohne Bild bzw. Icon und mit oder ohne Teasertext möglich.
Hinweis
Wird ein neuer Akkordeon geöffnet, schließt sich ein zuvor bereits geöffnetes Akkordeon wieder automatisch und die Seite scrollt zum Anfang des neue geöffneten Akkordeons.
Vorschau
HTML
<div class="grid_header">
<h2>Akkordeon mit Bild</h2>
</div>
<div class="container grid grid-accordion accordion-autoscroll accordion-autoclose">
<div class="accordion_wrapper" id="accordion-group-1">
<div class="accordion_heading">
<a class="accordion-toggle clearfix collapsed" role="button" data-toggle="collapse" data-parent="#accordion-group-1" href="#accordion-1" aria-expanded="false" aria-controls="accordion-1">
<div class="header_wrapper row row-tabled-mobile">
<div class="col-xs-3 col-image col-tabled-mobile">
<img height="147" width="262" src="/img/dummy/262x147.png">
</div>
<div class="col-xs-9 col-header col-tabled-mobile">
<h2 class="header">Lorem Ipsum Dolor</h2>
<span class="indicator"></span>
</div>
</div>
</a>
</div>
<div id="accordion-1" class="accordion-body has-image collapse" aria-expanded="false" style="height: 0px;">
<div class="row">
<div class="col-md-push-3 col-md-9 col-sm-12 col-xs-12">
<div class="accordion_content_inner">
<div id="accordion-1-content">
<div class="contentelement contentelement_text center_full gap_normal contentelement_first_in_grid contentelement_last_in_grid">
<div class="ce_header">
<h2 class="header with_subheader">Lorem</h2>
<h3 class="subheader">Ipsum</h3>
</div>
<div class="content cms_content clearfix ">
<div class="content_wrapper">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container grid grid-accordion accordion-autoscroll accordion-autoclose">
<div class="accordion_wrapper" id="accordion-group-4">
<div class="accordion_heading">
<a class="accordion-toggle clearfix collapsed" role="button" data-toggle="collapse" data-parent="#accordion-group-4" href="#accordion-4" aria-expanded="false" aria-controls="accordion-4">
<div class="header_wrapper row row-tabled-mobile">
<div class="col-xs-3 col-image col-tabled-mobile">
<img height="147" width="262" src="/img/dummy/262x147.png">
</div>
<div class="col-xs-9 col-header col-tabled-mobile">
<h2 class="header">Lorem Ipsum Dolor</h2>
<span class="indicator"></span>
</div>
</div>
</a>
</div>
<div id="accordion-4" class="accordion-body has-image collapse" aria-expanded="false" style="height: 0px;">
<div class="row">
<div class="col-md-push-3 col-md-9 col-sm-12 col-xs-12">
<div class="accordion_content_inner">
<div id="accordion-4-content">
<div class="contentelement contentelement_text center_full gap_normal contentelement_first_in_grid contentelement_last_in_grid">
<div class="ce_header">
<h2 class="header with_subheader">Lorem</h2>
<h3 class="subheader">Ipsum</h3>
</div>
<div class="content cms_content clearfix ">
<div class="content_wrapper">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid_header">
<h2>Akkordeon ohne Bild</h2>
</div>
<div class="container grid grid-accordion accordion-autoscroll">
<div class="accordion_wrapper" id="accordion-group-2">
<div class="accordion_heading">
<a class="accordion-toggle clearfix collapsed" role="button" data-toggle="collapse" data-parent="#accordion-group-2" href="#accordion-2" aria-expanded="false" aria-controls="accordion-2">
<div class="header_wrapper row row-tabled-mobile">
<div class="col-xs-12 col-header col-tabled-mobile">
<h2 class="header">Lorem Ipsum Dolor</h2>
<span class="indicator"></span>
</div>
</div>
</a>
</div>
<div id="accordion-2" class="accordion-body has-image collapse" aria-expanded="false" style="height: 0px;">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="accordion_content_inner">
<div id="accordion-2-content">
<div class="contentelement contentelement_text center_full gap_normal contentelement_first_in_grid contentelement_last_in_grid">
<div class="ce_header">
<h2 class="header with_subheader">Lorem</h2>
<h3 class="subheader">Ipsum</h3>
</div>
<div class="content cms_content clearfix ">
<div class="content_wrapper">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid_header">
<h2>Akkordeon mit Icon</h2>
</div>
<div class="container grid grid-accordion accordion-autoscroll">
<div class="accordion_wrapper" id="accordion-group-3">
<div class="accordion_heading">
<a class="accordion-toggle clearfix collapsed" role="button" data-toggle="collapse" data-parent="#accordion-group-3" href="#accordion-3" aria-expanded="false" aria-controls="accordion-3">
<div class="header_wrapper row row-tabled-mobile">
<div class="col-xs-3 col-sm-2 col-md-1 col-image col-tabled-mobile">
<svg class="av_svg_icon" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve">
<path d="M24.1,25.719c-0.097,0-0.19-0.041-0.254-0.114l-0.626-0.7c-0.09,0-0.182,0-0.27,0l-0.626,0.7
c-0.1,0.113-0.264,0.146-0.4,0.08l-0.654-0.316l-0.022-0.01l-0.664-0.321c-0.136-0.066-0.213-0.214-0.187-0.363l0.161-0.927
c-0.06-0.067-0.117-0.138-0.17-0.213l-0.94-0.05c-0.151-0.008-0.279-0.115-0.313-0.263l-0.161-0.708l-0.006-0.023l-0.164-0.719
c-0.033-0.147,0.035-0.299,0.167-0.372l0.826-0.454c0.017-0.089,0.037-0.177,0.06-0.264l-0.547-0.766
c-0.088-0.123-0.083-0.29,0.011-0.408l0.459-0.577l0.01-0.012l0,0l0.456-0.571c0.095-0.12,0.259-0.161,0.4-0.1l0.867,0.363
c0.083-0.044,0.168-0.085,0.255-0.122l0.248-0.874c0.041-0.146,0.174-0.247,0.326-0.247h1.488c0.152,0,0.285,0.101,0.326,0.247
l0.244,0.871c0.086,0.037,0.171,0.077,0.254,0.122l0.867-0.363c0.141-0.061,0.305-0.02,0.4,0.1l0.46,0.576l0.009,0.011l0.46,0.578
c0.094,0.118,0.099,0.285,0.011,0.408l-0.546,0.765c0.024,0.087,0.044,0.176,0.06,0.266L27.2,21.4
c0.133,0.073,0.202,0.225,0.168,0.373l-0.331,1.451c-0.034,0.148-0.162,0.255-0.313,0.263l-0.94,0.05
c-0.054,0.073-0.11,0.144-0.169,0.212l0.161,0.928c0.026,0.149-0.051,0.297-0.187,0.363l-0.664,0.321l-0.022,0.01l0,0l-0.653,0.315
C24.203,25.708,24.152,25.72,24.1,25.719z M23.363,24.212c0.097,0,0.189,0.042,0.253,0.114l0.566,0.638l0.434-0.209l0.022-0.01l0,0
l0.423-0.2l-0.145-0.84c-0.018-0.106,0.015-0.215,0.09-0.293c0.115-0.119,0.219-0.249,0.31-0.387
c0.059-0.09,0.158-0.146,0.265-0.152l0.85-0.045l0.107-0.472v-0.01l0.108-0.471L25.9,21.463c-0.095-0.052-0.16-0.146-0.174-0.254
c-0.021-0.163-0.057-0.323-0.109-0.479c-0.033-0.102-0.016-0.213,0.045-0.3l0.494-0.692l-0.3-0.376l-0.009-0.01l-0.3-0.377
l-0.785,0.328c-0.1,0.042-0.213,0.034-0.306-0.022c-0.144-0.087-0.295-0.159-0.453-0.217c-0.102-0.037-0.18-0.121-0.21-0.226
l-0.224-0.789H22.6l-0.223,0.788c-0.03,0.104-0.107,0.188-0.209,0.225c-0.158,0.058-0.311,0.132-0.455,0.219
c-0.093,0.056-0.206,0.064-0.306,0.022l-0.785-0.328l-0.3,0.377l-0.01,0.012l0,0l-0.3,0.371l0.5,0.694
c0.061,0.087,0.078,0.198,0.045,0.3c-0.052,0.155-0.088,0.315-0.109,0.477c-0.014,0.107-0.078,0.202-0.173,0.254l-0.747,0.411
l0.1,0.458l0.006,0.023l0.107,0.47l0.851,0.045c0.109,0.006,0.208,0.063,0.267,0.155c0.089,0.138,0.192,0.266,0.306,0.384
c0.075,0.078,0.108,0.187,0.09,0.293l-0.145,0.839l0.423,0.2l0.022,0.01l0.434,0.209l0.566-0.638
c0.072-0.081,0.179-0.123,0.287-0.112c0.162,0.016,0.326,0.016,0.488,0L23.363,24.212z M23.085,23.105
c-0.853-0.001-1.545-0.693-1.544-1.546c0.001-0.853,0.693-1.545,1.546-1.544c0.853,0.001,1.544,0.692,1.544,1.545
C24.63,22.413,23.939,23.104,23.085,23.105L23.085,23.105z M23.085,20.692c-0.479,0.001-0.866,0.39-0.865,0.869
c0.001,0.479,0.39,0.866,0.869,0.865c0.478-0.001,0.865-0.389,0.865-0.867C23.953,21.08,23.565,20.692,23.085,20.692L23.085,20.692z
"></path>
<path d="M29.644,25.788c-0.023-0.132-0.131-0.233-0.264-0.247l-0.312-0.033l0.071-0.306c0.03-0.131-0.031-0.266-0.149-0.33
l-0.557-0.306c-0.118-0.065-0.265-0.044-0.359,0.052l-0.223,0.225l-0.187-0.237c-0.083-0.106-0.228-0.143-0.352-0.091l-0.585,0.244
c-0.125,0.051-0.2,0.179-0.184,0.313l0.036,0.3h-0.318c-0.134,0-0.252,0.089-0.289,0.218L25.8,26.2
c-0.038,0.129,0.015,0.268,0.13,0.339l0.267,0.165l-0.2,0.246c-0.084,0.105-0.088,0.253-0.01,0.362l0.369,0.519
c0.08,0.108,0.219,0.151,0.346,0.108l0.3-0.1l0.069,0.3c0.029,0.132,0.142,0.228,0.277,0.235l0.634,0.034H28
c0.128,0.001,0.242-0.079,0.285-0.2l0.1-0.3l0.283,0.136c0.077,0.038,0.168,0.04,0.247,0.006c0.042-0.017,0.079-0.044,0.109-0.078
l0.421-0.474c0.09-0.1,0.102-0.248,0.03-0.362L29.3,26.874l0.283-0.136c0.121-0.058,0.189-0.19,0.166-0.322L29.644,25.788z
M28.735,26.614c-0.012,0.06-0.028,0.118-0.05,0.175c-0.036,0.09-0.027,0.191,0.025,0.273l0.132,0.208l-0.119,0.135L28.5,27.3
c-0.078-0.036-0.167-0.038-0.246-0.006l0.06,0.144L28.227,27.3c-0.052,0.028-0.107,0.051-0.163,0.069
c-0.093,0.027-0.168,0.097-0.2,0.189l-0.081,0.233l-0.18-0.01l-0.054-0.24c-0.021-0.093-0.086-0.171-0.174-0.209
c-0.055-0.024-0.108-0.053-0.158-0.087c-0.079-0.055-0.18-0.068-0.271-0.035l-0.233,0.083l-0.1-0.148l0.153-0.193
c0.06-0.075,0.08-0.174,0.055-0.266c-0.016-0.058-0.026-0.118-0.03-0.178c-0.007-0.096-0.059-0.182-0.141-0.233l-0.21-0.131
l0.05-0.173h0.246c0.095,0,0.185-0.045,0.242-0.122c0.037-0.051,0.079-0.097,0.125-0.14c0.07-0.066,0.105-0.161,0.094-0.256
l-0.027-0.23l0.166-0.07l0.144,0.181c0.054,0.083,0.151,0.127,0.249,0.114c0.062-0.002,0.124,0.002,0.186,0.01
c0.095,0.014,0.191-0.018,0.258-0.086l0.172-0.175l0.155,0.094l-0.055,0.239c-0.022,0.094,0.003,0.192,0.066,0.265
c0.038,0.046,0.072,0.096,0.1,0.148c0.048,0.083,0.133,0.138,0.229,0.148l0.246,0.026l0.03,0.178L28.9,26.4
C28.814,26.441,28.752,26.52,28.735,26.614L28.735,26.614z"></path>
<path d="M17.58,17.347l-0.228-0.01l-2.81,2.2l-1.307-0.9l-0.49-0.368c-0.14,0.186-0.286,0.366-0.443,0.536l1.825,1.35l-1.313,5.026
l1.735,2.781l1.794-2.838l-1.369-4.974l2.591-2.015c0.309,0.078,0.827,0.225,1.446,0.446l0.568-0.609
C18.925,17.725,18.258,17.517,17.58,17.347z M15.55,25l-1,1.566l-0.947-1.51l0.951-3.624L15.55,25z"></path>
<path d="M24.6,26.445c-1.847,1.06-4.982,2.179-10.055,2.179c-6.089,0-9.233-1.583-10.564-2.526
c-0.325-0.238-0.495-0.634-0.444-1.034c0.321-2.78,1.984-4.817,4.929-6.05l0.84-0.285c-0.174-0.208-0.349-0.417-0.521-0.627
c-0.2,0.069-0.4,0.137-0.587,0.211l0,0c-3.217,1.338-5.047,3.572-5.439,6.636c-0.102,0.679,0.197,1.356,0.769,1.737
c1.422,1,4.744,2.665,11.02,2.665c5.653,0,8.87-1.336,10.479-2.327C24.884,26.835,24.742,26.642,24.6,26.445z"></path>
<path d="M22.2,9.523c-0.631-3.701-3.816-6.423-7.57-6.471c-3.752,0.025-6.935,2.762-7.52,6.469
c-0.421,0.176-0.694,0.589-0.693,1.045v2.512c-0.016,0.299,0.093,0.592,0.3,0.808c0.214,0.225,0.51,0.354,0.821,0.355h0.186
c0.432,1.086,1.138,2.04,2.05,2.77v0.025c0.002,0.68,0.556,1.23,1.236,1.228s1.23-0.556,1.228-1.236
c-0.002-0.679-0.553-1.228-1.232-1.228c-0.212-0.001-0.42,0.053-0.605,0.157c-0.153,0.084-0.282,0.204-0.378,0.35
c-0.686-0.623-1.229-1.387-1.59-2.241c0.188-0.126,0.337-0.303,0.428-0.51c0.065-0.139,0.099-0.29,0.1-0.443v-2.52
c-0.002-0.456-0.272-0.869-0.69-1.053c-0.138-0.055-0.282-0.092-0.43-0.109c0.603-3.28,3.454-5.668,6.789-5.687
c3.334,0.038,6.181,2.418,6.808,5.693c-0.141,0.003-0.28,0.027-0.414,0.071c-0.428,0.175-0.706,0.594-0.7,1.057v2.525
c0.008,0.632,0.519,1.143,1.151,1.152h0.242c0.633-0.009,1.143-0.519,1.152-1.152v-2.524C22.868,10.118,22.607,9.711,22.2,9.523z
M10.47,16.943l0.013-0.032c0.034-0.128,0.103-0.244,0.2-0.334l0.07-0.042c0.074-0.048,0.162-0.071,0.25-0.065
c0.298,0.001,0.539,0.242,0.538,0.54c-0.001,0.298-0.242,0.539-0.54,0.538c-0.297-0.001-0.537-0.241-0.538-0.538
C10.463,16.987,10.465,16.965,10.47,16.943z M7.86,10.122l0.106,0.047c0.161,0.07,0.268,0.225,0.276,0.4v2.521
c-0.006,0.06-0.02,0.119-0.042,0.175L8.194,13.3c-0.051,0.088-0.127,0.159-0.217,0.206l-0.058,0.015
c-0.046,0-0.092,0.008-0.134,0.026H7.542c-0.236-0.006-0.426-0.196-0.432-0.432v-2.55c0.003-0.218,0.162-0.403,0.377-0.439
l0.074-0.021c0.036,0,0.069,0,0.1,0C7.728,10.104,7.794,10.109,7.86,10.122z M22.123,13.09c-0.006,0.236-0.196,0.426-0.432,0.432
h-0.242c-0.236-0.006-0.426-0.196-0.432-0.432v-2.524c-0.004-0.175,0.103-0.333,0.267-0.393c0.097-0.029,0.199-0.042,0.3-0.039
c0.068-0.003,0.135,0.005,0.2,0.024c0.195,0.039,0.336,0.21,0.336,0.409v2.523H22.123z"></path>
<path d="M14.6,5.393c-2.856,0.062-5.124,2.424-5.07,5.28c-0.054,2.856,2.214,5.218,5.07,5.28c2.856-0.063,5.123-2.424,5.069-5.28
C19.723,7.817,17.456,5.456,14.6,5.393z M14.6,15.293c-2.486-0.069-4.449-2.135-4.389-4.622c-0.059-2.486,1.903-4.551,4.389-4.62
c2.486,0.069,4.448,2.136,4.388,4.622c0.063,2.488-1.9,4.558-4.388,4.627V15.293z"></path>
</svg>
</div>
<div class="col-xs-9 col-sm-10 col-md-11 col-header col-tabled-mobile">
<h2 class="header">Lorem Ipsum Dolor</h2>
<span class="indicator"></span>
</div>
</div>
</a>
</div>
<div id="accordion-3" class="accordion-body has-image collapse" aria-expanded="false" style="height: 0px;">
<div class="row">
<div class="col-md-push-1 col-md-11 col-sm-12 col-xs-12">
<div class="accordion_content_inner">
<div id="accordion-3-content">
<div class="contentelement contentelement_text center_full gap_normal contentelement_first_in_grid contentelement_last_in_grid">
<div class="ce_header">
<h2 class="header with_subheader">Lorem</h2>
<h3 class="subheader">Ipsum</h3>
</div>
<div class="content cms_content clearfix ">
<div class="content_wrapper">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid_header">
<h2>Akkordeon mit Teasertext</h2>
</div>
<div class="container grid grid-accordion accordion-autoscroll accordion-autoclose">
<div class="accordion_wrapper" id="accordion-group-3044">
<div class="accordion_heading">
<a class="accordion-toggle clearfix collapsed" role="button" data-toggle="collapse" data-parent="#accordion-group-3044" href="#accordion-3044" aria-expanded="false" aria-controls="accordion-3044">
<div class="header_wrapper row row-tabled-mobile">
<div class="col-xs-12 col-header col-tabled-mobile">
<div class="h2 header">Lorem</div>
<div class="teaser hidden-sm hidden-xs">Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam
</div>
<span class="indicator"></span>
</div>
</div>
</a>
</div>
<div id="accordion-3044" class="accordion-body collapse" aria-expanded="false" style="height: 0px;">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="accordion_content_inner">
<div>
<div class="contentelement contentelement_text center_full gap_normal contentelement_first_in_grid contentelement_last_in_grid">
<div class="content clearfix ">
<div class="content_wrapper">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
.grid_header {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
.grid_header {
margin-top: 25px;
margin-bottom: 25px;
}
}
.grid.grid-accordion + .grid-accordion .accordion_wrapper {
border-top: none;
}
.accordion_wrapper {
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.accordion_wrapper:first-child {
border-top: 1px solid #E6E6E6;
}
.accordion_wrapper .accordion_heading {
background-color: #fff;
transform: translate3d(0px, 0px, 0px);
}
.accordion_wrapper .accordion-toggle {
display: block;
padding: 40px 0 40px 35px;
position: relative;
/* alignment anchor for the indicator */
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image {
text-align: center;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image img {
max-width: 100%;
height: auto;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image svg.av_svg_icon {
width: 100%;
max-width: 52px;
height: auto;
max-height: 52px;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image svg.av_svg_icon * {
fill: #0069b4;
transition: 0.2s fill ease;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image svg.av_svg_icon *[stroke] {
stroke: #0069b4;
transition: 0.2s stroke ease;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image.svg_image img {
max-height: 80px;
width: auto;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header {
padding-right: 120px;
position: static;
/* alignment anchor for the indicator must be .accordion-toggle to get absolute positioning working in ie as the cols use display:table-cell which is kinda buggish in ie regarding absolute positioning */
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .header {
transition: 0.2s color ease;
font-size: 23px;
font-size: 1.4375rem;
line-height: 25px;
line-height: 1.5625rem;
margin-bottom: 0;
}
@media screen and (max-width: 767) {
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .header {
transition: none;
}
}
@media screen and (max-width: 767px) {
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .header {
word-wrap: break-word;
font-size: 17px;
font-size: 1.0625rem;
line-height: 19px;
line-height: 1.1875rem;
}
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser {
margin-top: 15px;
color: #4c4c4c;
font-size: 16px;
font-size: 1rem;
line-height: 22px;
line-height: 1.375rem;
font-family: 'Corpid_TT5_Regular', Arial;
font-weight: normal;
font-style: normal;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser .cms_content p {
margin: 11px 0 22px;
margin: 0.6875rem 0 1.375rem;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser .cms_content ul,
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser .cms_content ol {
margin: 11px 0 22px;
margin: 0.6875rem 0 1.375rem;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator {
display: block;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 15px;
width: 50px;
height: 29px;
transition: 0.4s transform ease;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator:before {
font-family: 'schoeck';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator:before {
font-size: 26px;
line-height: 26px;
color: #b3b3b3;
display: block;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
text-align: center;
padding-bottom: 20px;
width: 100px;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
width: 39px;
height: 20px;
bottom: 0;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .arrow:before {
font-family: 'schoeck';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .arrow:before {
font-size: 20px;
line-height: 20px;
color: #b3b3b3;
transition: 0.4s transform ease;
display: block;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .text {
display: block;
color: #b3b3b3;
margin-bottom: 10px;
}
.accordion_wrapper .accordion-toggle:not(.collapsed) .header_wrapper .col-header .indicator {
transform: translateY(-50%) rotate(180deg);
}
.accordion_wrapper .accordion-toggle:not(.collapsed) .header_wrapper .col-header .labelled_indicator .arrow:before {
transform: rotate(180deg);
}
.accordion_wrapper .accordion-toggle:hover .col-image svg.av_svg_icon * {
fill: #f9b200;
}
.accordion_wrapper .accordion-toggle:hover .col-image svg.av_svg_icon *[stroke] {
stroke: #f9b200;
}
.accordion_wrapper .accordion-toggle:hover .col-header .header {
color: #f9b200;
}
.accordion_wrapper .accordion-body .accordion_content_inner {
padding: 0 105px 35px 35px;
}
.accordion_wrapper .accordion-body .accordion_content_inner .ce_header {
text-align: left;
margin-bottom: 10px;
}
.accordion_wrapper .accordion-body .accordion_content_inner .contentelement:last-child {
margin-bottom: 0;
}
.accordion_wrapper .accordion-body.has-image .accordion_content_inner {
padding-left: 30px;
}
@media screen and (max-width: 767px) {
.accordion_wrapper .accordion-body.has-image .accordion_content_inner {
padding-left: 0;
}
}
@media print {
.accordion_wrapper .accordion-body {
height: auto !important;
display: block;
visibility: visible;
}
}
@media screen and (max-width: 991px) {
.accordion_wrapper .accordion-toggle {
padding: 15px 0 15px 0;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header {
padding-right: 80px;
padding-top: 5px;
padding-bottom: 5px;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator {
height: 13px;
width: 24px;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator:before {
font-size: 13px;
line-height: 13px;
}
.accordion_wrapper .accordion-toggle.with_labelled_indicator {
padding: 15px;
}
.accordion_wrapper .accordion-toggle.with_labelled_indicator .header_wrapper .col_header {
padding-right: 120px;
}
.accordion_wrapper .accordion-body .accordion_content_inner {
padding-right: 44px;
padding-bottom: 25px;
}
}
@media screen and (max-width: 767px) {
.accordion_wrapper .accordion-body .accordion_content_inner {
padding-left: 0;
padding-right: 0;
}
}
.row-tabled-mobile {
display: table;
width: calc(100% + 30px);
table-layout: fixed;
}
.row-tabled-mobile:before, .row-tabled-mobile:after {
content: none;
}
.col-tabled-mobile {
display: table-cell;
float: none;
vertical-align: middle;
height: 100%;
}
SCSS
@import "../general/_general";
.grid_header {
text-align:center;
margin-top:50px;
margin-bottom:50px;
@media screen and (max-width:$screen-xs-max) {
margin-top:25px;
margin-bottom:25px;
}
}
.grid {
&.grid-accordion {
& + .grid-accordion {
.accordion_wrapper {
border-top:none;
}
}
}
}
.accordion_wrapper {
border-bottom:1px solid $lightgrey;
overflow:hidden;
&:first-child {
border-top:1px solid #E6E6E6;
}
.accordion_heading {
background-color:#fff;
transform:translate3d(0px,0px,0px);
}
.accordion-toggle {
display:block;
padding:40px 0 40px 35px;
position:relative; /* alignment anchor for the indicator */
.header_wrapper {
.col-image {
text-align:center;
img {
max-width:100%;
height:auto;
}
svg.av_svg_icon {
width:100%;
max-width:52px;
height:auto;
max-height:52px;
* {
fill:$blue;
@include transition($linkcolor-transition-duration fill ease);
&[stroke] {
stroke:$blue;
@include transition($linkcolor-transition-duration stroke ease);
}
}
}
&.svg_image {
img {
max-height:80px;
width:auto;
}
}
}
.col-header {
padding-right:120px;
position:static; /* alignment anchor for the indicator must be .accordion-toggle to get absolute positioning working in ie as the cols use display:table-cell which is kinda buggish in ie regarding absolute positioning */
.header {
@include linkcolor-transition;
@include rem-font-size(23);
@include rem-line-height(25);
margin-bottom:0;
@media screen and (max-width:767px) {
word-wrap:break-word;
@include rem-font-size(17);
@include rem-line-height(19);
}
}
.teaser {
margin-top:15px;
color:$darkergrey;
@include copy-large;
@include corpid-regular;
}
.indicator {
display:block;
position:absolute;
transform:translateY(-50%);
top:50%;
right:15px;
width:50px;
height:29px;
@include schoeck-icon($icon-accordion-closed);
@include transition(0.4s transform ease);
&:before {
font-size:26px;
line-height:26px;
color:$grey;
display:block;
}
}
.labelled_indicator {
@include autocenterY();
right:15px;
text-align:center;
padding-bottom:20px;
width:100px;
.arrow {
@include autocenterX();
display:block;
width:39px;
height:20px;
bottom:0;
@include schoeck-icon($icon-accordion-closed);
&:before {
font-size:20px;
line-height:20px;
color:$grey;
@include transition(0.4s transform ease);
display:block;
}
}
.text {
display:block;
color:$grey;
margin-bottom:10px;
}
}
}
}
&:not(.collapsed) {
.header_wrapper {
.col-header {
.indicator {
transform:translateY(-50%) rotate(180deg);
}
.labelled_indicator {
.arrow {
&:before {
transform:rotate(180deg);
}
}
}
}
}
}
&:hover {
.col-image {
svg.av_svg_icon {
* {
fill:$orange;
&[stroke] {
stroke:$orange;
}
}
}
}
.col-header {
.header {
color:$orange;
}
}
}
}
.accordion-body {
.accordion_content_inner {
padding:0 105px 35px 35px;
.ce_header {
text-align:left;
margin-bottom:10px;
}
.contentelement {
&:last-child {
margin-bottom:0;
}
}
}
&.has-image {
.accordion_content_inner {
padding-left:30px;
@media screen and (max-width:767px) {
padding-left:0;
}
}
}
@media print {
height:auto !important;
display: block;
visibility: visible;
}
}
@media screen and (max-width:991px) {
.accordion-toggle {
padding:15px 0 15px 0;
.header_wrapper {
.col-header {
padding-right:80px;
padding-top:5px;
padding-bottom:5px;
.indicator {
height:13px;
width:24px;
&:before {
font-size:13px;
line-height:13px;
}
}
}
}
&.with_labelled_indicator{
padding:15px;
.header_wrapper {
.col_header {
padding-right:120px;
}
}
}
}
.accordion-body {
.accordion_content_inner {
padding-right:44px;
padding-bottom:25px;
}
}
}
@media screen and (max-width:767px) {
.accordion-body {
.accordion_content_inner {
padding-left:0;
padding-right:0;
}
}
}
}
.row-tabled-mobile {
@include row-tabled;
}
.col-tabled-mobile {
@include col-tabled;
}
JavaScript
jQuery(document).ready(function(){
jQuery('body').on('shown.bs.collapse', '.accordion-autoscroll .accordion-body', function()
{
if(jQuery(this).hasClass('prevent_scroll'))
{
jQuery(this).removeClass('prevent_scroll');
return;
}
jQuery('html, body').animate({scrollTop:jQuery(this).parents('.accordion-autoscroll').offset().top-50}, 500, 'easeInOutQuint');
});
jQuery('body').on('show.bs.collapse', '.accordion-autoclose .accordion-body', function()
{
jQuery('.accordion-autoclose .accordion-body.collapse.in').collapse('hide');
});
});