How to use collapse in correct way - javascript

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingOne">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseOne"></i>
<font data-toggle="collapse" data-target="#collapseOne">Header</font>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingTwo">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseTwo"></i>
<font data-toggle="collapse" data-target="#collapseTwo">Detail</font>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<font data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</font>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<font data-toggle="collapse" data-target="#collapseThree">Debtor Price Detail</font>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<font data-toggle="collapse" data-target="#collapseThree">Tesco</font>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>
The Code i Copy from link: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion
I just change the button to font
My Problem is:
The code should be toggle but I click 1 more time to close the card body (not working). Only press other collapse then its close.
How to solve this.


The issue you are facing is because <font> have display CSS attribute value inline by default, I would suggest to not using it since its obsolete, to fix the issue I replaced <font> tag with <div>
Note: I also fixed the the collapse attribute for the some of the accordion elements and moved the inline CSS to CSS classes.
.card-header-title {
border-radius:0px;
cursor:pointer;
}
.pe-7s-angle-up-circle {
color:#3d68e0;
font-size:16px
}
font {
display: block
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingOne">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseOne"></i>
<div data-toggle="collapse" data-target="#collapseOne">Header</div>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingTwo">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseTwo"></i>
<div data-toggle="collapse" data-target="#collapseTwo">Detail</div>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<div data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</div>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<div data-toggle="collapse" data-target="#collapseFour">Debtor Price Detail</div>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<div data-toggle="collapse" data-target="#collapseFive">Tesco</div>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>

Related

Bootstrap accordion unfold while scrolling

I would like to make the accordion which is shown below in the code in a way that all are unfolding while the user is scrolling down. At the moment only the first is unfold and the other are going to be unfold, when the user clicks the headline. How can I achieve this?
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h1 class="mb-0">
<button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
A
</button>
</h1>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
B
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Text
<ul>Darum</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
C
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
D
</button>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
E
</button>
</h2>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>

You can use .is(':visible') and create a loop for each accordion item.
For example: if $('#headingFour').is(':visible') then trigger click on $('#headingFour button')!

bootstrap accordion show by default on desktop and hide by default mobile

I'm kind of new to bootstrap so I'm not sure how I'd go about this.
I have a simple bootstrap accordion like in this snippet. It is split into multiple accordions because I want them to be able to expand and collapse independently from each other. (as in can expand and show all items or none, not just one expanded and the others collapsed)
I want to disable the expanding and collapsing on desktop and make sure each item is shown. But then on mobile I only want to have the first item shown and the others collapsed by default.
Any suggestions on how I could achieve this would be greatly appreciated.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
//heading
</button>
</div>
<div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading2">
<button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
//heading
</button>
</div>
<div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading3">
<button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
//heading
</button>
</div>
<div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>

I have found a solution for this, please check below
CSS for desktop
.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%;
height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}
CSS for Mobile
#media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}
HTML structure
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">Contect-1</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">Content-2</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">Content-3</div>
</div>
</div>
</div>

Bootstrap - Have items display as block in two column layout rather than split over two columns

I have created a bootstrap accordion like in this snippet and styled it into two columns.
However, when I expand a section I want to try keep each .card as a block so its not expanding over two columns.
Any ideas or suggestions on how I can achieve this would be greatly appreciated.
Adding display:block; to .card has no effect.
#accordion {
column-count: 2;
}
.card {
margin: 0px 20px 20px 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<button class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Heading3</button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<button class="btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Heading4</button>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<button class="btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">Heading5</button>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<button class="btn" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">Heading6</button>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
</div>

Reference.
#accordion {
column-count: 2;
}
.card {
margin: 0px 20px 20px 20px;
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<button class="btn" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Heading3</button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading4">
<button class="btn" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Heading4</button>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<button class="btn" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">Heading5</button>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<button class="btn" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">Heading6</button>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
<div class="card-body">
item1
item2
item3
item4
</div>
</div>
</div>
</div>

Collapse inner section remains uncollapsed, when one inner section collapses

I created a collapsable menu with bootstrap.
The main collapse work as expected; when one button is selected, other collapses.
Inside each collapse I added other collapsable buttons.
However, when there is another collapse inside it doesn't collapse the other section.
When "content 2 inner" button is selected, after that "content 1 ineer" button is selected both remains uncollapsed
You can check https://codepen.io/snarex/pen/WqrvpP
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup1">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11"
role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2"
aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup2">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21"
role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample22" aria-expanded="false"
aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The data-parent needs to be the parent of both, not a sibling like you have with the rows. Make the card the parent...
https://www.codeply.com/go/DRxAXQF7E7
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body" id="myGroup1">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body" id="myGroup2">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21" role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample22" aria-expanded="false" aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I would like to change the icon only on collapsed: Getting-> attr is not defined:

I am trying to make only the collapsed aria to show different arrow.
most of code which i tried until now work only on one collapsed element but leave incase of clicking on second tile the first arrow wrong-direction, and turn the second.
i tried to use two css classes with a transition to rotate but had problems with fastclickers. if you click very fast the arrow wasnt able to turn twice
$(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>

I'd suggest a different approach: .toggleClass( className ) on the child element:
$(".btn-link").on('click', function (e) {
$(this).find('i').toggleClass('fa-angle-down fa-angle-up')
});
Please, avoid duplicated IDs like kundenKarteBack or gutscheinDaten. An ID must be unique.
According to your comment there are two solutions:
set the first i tag with fa-angle-up class instead of fa-angle-down
...or change the event handler condition
like:
$(".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-->
In any case you may use the accordion events and in this case your handler will be:
$(".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-->

It was my first question on stackoverflow and i think i got a wrong approach. sorry 4 that.
here is more code that will maybe help understanding my problem.
<!-- 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-->

Categories