我正在尝试仅使折叠的咏叹调显示不同的箭头。 到目前为止，我尝试过的大多数代码仅在一个折叠的元素上起作用，但是如果第二个图块单击时，第一个箭头的方向错误，然后将第二个箭头转向第二个。
我尝试使用两个具有过渡功能的css类来旋转，但是在fastclickers中遇到问题。如果您单击得非常快，箭头将无法转动两次
$(document).ready(function () {
$(".btn-link")
.on(attr("aria-expanded", "true"), (function () {
$(this).parent().find('fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-up');
})
.on(attr("aria-expanded", "false"), (function () {
$(this).parent().find('fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down');
}))); });
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
<script type="text/javascript">
var qrcode1 = new QRCode(document.getElementById("qrcode1"), {
text: "www.sfdbvsd",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我建议采用另一种方法：在子元素上使用.toggleClass( className )：
$(".btn-link").on('click', function (e) {
$(this).find('i').toggleClass('fa-angle-down fa-angle-up')
});
请避免使用重复的ID，例如kundenKarteBack或gutscheinDaten。 ID必须是唯一的。
根据您的评论有两种解决方案：
喜欢：
$(".btn-link").on('click', function (e) {
if ($(this).is('.collapsed')) {
$(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});
$(".btn-link").on('click', function (e) {
if ($(this).is('.collapsed')) {
$(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode2"></div>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode3"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode4"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
aria-expanded="false" aria-controls="Gutschein5">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode5"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
aria-expanded="false" aria-controls="Gutschein6">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode6"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion Liste-->
无论如何，您都可以使用accordion events，在这种情况下，您的处理程序将是：
$(".collapse").on('show.bs.collapse hide.bs.collapse', function (e) {
if (e.type == 'show') {
$(this).prev().find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).prev().find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});
$(".collapse").on('show.bs.collapse hide.bs.collapse', function (e) {
if (e.type == 'show') {
$(this).prev().find('i').removeClass('fa-angle-down').addClass('fa-angle-up')
} else {
$(this).prev().find('i').removeClass('fa-angle-up').addClass('fa-angle-down')
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode2"></div>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode3"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode4"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
aria-expanded="false" aria-controls="Gutschein5">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode5"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
aria-expanded="false" aria-controls="Gutschein6">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode6"></div>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion Liste-->
答案 1 :(得分：0)
这是我关于stackoverflow的第一个问题，我认为我采用了错误的方法。对不起4。 这是更多代码，可能有助于理解我的问题。
<!-- Accordion Liste-->
<div class="accordion" id="accordionListe">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#Gutschein1"
aria-expanded="true" aria-controls="Gutschein1"><span class="pull-left">Autowäsche</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein1" class="collapse show" aria-labelledby="Gutschein1" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode1"></div>
<script type="text/javascript">
var qrcode1 = new QRCode(document.getElementById("qrcode1"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Gutschein für eine Premium Wäsche!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein2"
aria-expanded="false" aria-controls="Gutschein2"><span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein2" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode2"></div>
<script type="text/javascript">
var qrcode2 = new QRCode(document.getElementById("qrcode2"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein3"
aria-expanded="false" aria-controls="Gutschein3"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate " aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein3" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode3"></div>
<script type="text/javascript">
var qrcode3 = new QRCode(document.getElementById("qrcode3"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein4"
aria-expanded="false" aria-controls="Gutschein4"><span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein4" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode4"></div>
<script type="text/javascript">
var qrcode4 = new QRCode(document.getElementById("qrcode4"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein5"
aria-expanded="false" aria-controls="Gutschein5">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein5" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode5"></div>
<script type="text/javascript">
var qrcode5 = new QRCode(document.getElementById("qrcode5"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein6"
aria-expanded="false" aria-controls="Gutschein6">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein6" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode6"></div>
<script type="text/javascript">
var qrcode6 = new QRCode(document.getElementById("qrcode6"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein11"
aria-expanded="false" aria-controls="Gutschein11">
<span class="pull-left">Kaffee</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein11" class="collapse" aria-expanded="false" aria-labelledby="headingTwo2"
data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode7"></div>
<script type="text/javascript">
var qrcode7 = new QRCode(document.getElementById("qrcode7"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>Ein Kaffee Ihrer Wahl "auf´s Haus"!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein7"
aria-expanded="false" aria-controls="Gutschein7">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein7" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode8"></div>
<script type="text/javascript">
var qrcode8 = new QRCode(document.getElementById("qrcode8"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein8"
aria-expanded="false" aria-controls="Gutschein8">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein8" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode9"></div>
<script type="text/javascript">
var qrcode9 = new QRCode(document.getElementById("qrcode9"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button id="scroller" class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#Gutschein9" aria-expanded="false" aria-controls="Gutschein9">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein9" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode10"></div>
<script type="text/javascript">
var qrcode10 = new QRCode(document.getElementById("qrcode10"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#Gutschein10"
aria-expanded="false" aria-controls="Gutschein10">
<span class="pull-left">Guthaben</span>
<i class="fa fa-angle-down fa-lg ml-5 pull-right rotate" aria-hidden="true"></i>
</button>
</h5>
</div>
<div id="Gutschein10" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionListe">
<div class="card-body">
<div class="container" id="kundenKarteBack">
<div id="qrcode11"></div>
<script type="text/javascript">
var qrcode11 = new QRCode(document.getElementById("qrcode11"), {
text: "www.otas.at",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</div>
<hr>
<p>10€ Auf Ihre nächste Tankfüllung!</p>
<div class="container">
<div class="row">
<div class="col-sm-5">
<p id="gutscheinDaten">Von: 11.11.2018</p>
</div>
<div class="col-sm-5">
<p id="gutscheinDaten">Gült.: 11.11.2019</p>
</div>
</div>
</div>
<hr>
<div class="container" id="kundenKarteBack">
<svg id="barcode1"></svg>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion Liste-->