Order HTML divs to their corresponding div with JavaScript

Order HTML divs to their corresponding div with JavaScript - javascript

In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>

This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>

Related

Search filter on div with hidden elements

I have a accordion placed inside a div and I have added a search box to the div which is intended to function as a search filter. Inside the div some accordion elements are visible and some are hidden. I need the filter to work only on visible elements.
In the current code I have used it's searching for all elements inside the div and when the search box is cleared the page is getting hanged and not responsive unless I refresh the page.
Any solution pointing to the right direction would be highly appreciated.
$(document).ready(function() {
$("#searchTC").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#testcases div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">Test<i class="fa fa-thumbs-o-down"></i> <small style="color:#117DEF">CASES</small></h4>
<div class="panel-actions">
<!--Search TestCases-->
<div id="filterTC" class="form-group">
<div class="input-search">
<i class="input-search-icon ti-search" aria-hidden="true" style="color: #1179EF"></i>
<input type="search" class="form-control" placeholder="Search..." id="searchTC">
</div>
</div>
<!--Select All/Deselect All Toggle-->
<div class="toggle-wrap w-checkbox float-right">
<input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)" style="transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s, border-color 0s linear 0.17s, -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1) 0s;">
<label class="toggle-label w-form-label" for="Toggle-Switch"></label>
<div class="toggle">
<div class="toggle-active">
<div class="active-overlay"></div>
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<div id="testcases" class="accordion js-accordion" style="max-height: 240px;overflow: auto;">
<div class="accordion__item js-accordion-item" id="0001" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_SearchProducts" aria-hidden="true" style="display: none;"><label for="labelauty-0001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_SearchProducts</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-0001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-00010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Ebay</button>
<div class="modal fade modal-fill-in" id="dtFillIn-00010" aria-hidden="false" aria-labelledby="dtFillIn-00010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Ebay</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Ebay"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item active"></div>
<div class="accordion__item js-accordion-item" id="00011" style="display: block" name="com.onlineshopping.TS_Ebay">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_LoginToApplication" aria-hidden="true" style="display: none;">
<label for="labelauty-00011"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_LoginToApplication</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-00011"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-000110" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_EbayLogin</button>
<div class="modal fade modal-fill-in" id="dtFillIn-000110" aria-hidden="false" aria-labelledby="dtFillIn-000110" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_EbayLogin</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_EbayLogin"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
<div class="accordion__item js-accordion-item" id="1001" style="display: none" name="com.onlineshopping.TS_Amazon">
<div class="accordion-header js-accordion-header"><input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_ExploreAmazon" aria-hidden="true" style="display: none;"><label for="labelauty-1001"><span class="labelauty-unchecked-image"></span><span class="labelauty-checked-image"></span></label> tc_ExploreAmazon</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">
<div class="dt" id="dt-1001"><button class="btn btn-success waves-effect waves-classic" data-target="#dtFillIn-10010" data-toggle="modal" type="button"><i class="icon md-apps" aria-hidden="true"></i>dt_Amazon</button>
<div class="modal fade modal-fill-in" id="dtFillIn-10010" aria-hidden="false" aria-labelledby="dtFillIn-10010" role="dialog" tabindex="-1">
<div class="modal-dialog modal-simple">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>
<div class="modal-body table-responsive">
<div class="panel">
<header class="panel-heading">
<div class="panel-actions"> <button class="btn waves-effect waves-classic" id="saveDT" name="saveDT"> Save </button> </div>
<h3 class="panel-title" id="dtName">dt_Amazon</h3>
</header>
<div class="panel-body">
<div class="col-sm-12" id="tableBodydt_Amazon"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__item js-accordion-item"></div>
</div>
<br>
<button type="button" class="btn btn-info float-right waves-effect waves-classic" onclick="loadplan()">Add to Plan</button>
</div>
</div>
</div>

Use jquery hidden attribute to check if element is hidden
if ($('#testElement').is(':visible')) {
// Code
}

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-->

tab is not loading when I click

Here is my code I pulled out from the internet which works fine in Online Snippets but when I copy and run it on my local computer , the tab stays same. Please help me
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
I would be very greatful, If anyone could help me what I am doing wrong. For reference, here is the original link to above bootstrap theme.
https://bootsnipp.com/snippets/featured/people-card-with-tabs

The reason is that you didn't include the bootstrap.min.js file, you only included the jQuery and the bootstrap.min.css file.
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
My 2 cents:
You should try and be more careful.
You should try and debug the problem, starting always from the most obvious reasons first.

You just need to load your js at the end of the body.
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>

How to store and retrieve value of button when clicked?

I'm making a checkin app for my soccer team. I think I got the buttons programmed properly but I'm having problems storing the value and retrieving the value from mySQL database. Can someone please tell me what piece of code I'm missing? thanks in advance.
<style>
.height {
height: 100px;
}
.height2 {
height: 50px;
text-align: center;
}
.fc {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: monospace;
font-size: 4em;
font-weight: bold;
}
.btn-xl {
padding: 15px 24px;
font-size: 24px;
line-height: 1.4;
border-radius: 8px;
text-transform: uppercase;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function($, window, document) {
$(function() {
// bind to the click event of the checkin button
$('.btn-player-checkin').on('click', function() {
// if the button has the success class - assume the user is checked in
var isCheckedIn = $(this).hasClass('btn-success');
// get the player id from the data attribute
var playerId = $(this).data('player-id');
// call the send function
// sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current);
// if you would like to test the success function without the ajax call, comment out above and uncomment below
if (!isCheckedIn) { // trying to check out
$(this).text('IN');
} else { // checking in
$(this).text('OUT');
}
// cycle classes
$(this).toggleClass('btn-success btn-danger');
});
function sendDataToServer(newStatus, playerId, button) {
$.ajax({
url: 'http://labombafootball.com/checkin', // replace this with the url of the server end point
method: 'POST',
data: {
playerId: playerId,
status: newStatus
} // send this data, on the server you could also record the timestamp of when this occurred
}).done(function() { // if we successfully complete the post
if (newStatus) { // checking in
button.text('OUT');
} else { // trying to check out
button.text('IN');
}
// cycle classes
button.toggleClass('btn-success btn-danger');
}).fail(function() {
// do something if the post fails
});
}
});
}(window.jQuery, window, document));
</script>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div>
</div>
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="2">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#1 INDER JHOOTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="1">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="21">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#88 NICK MARSHALL</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="88">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#99 TONY YUN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="99">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="6">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#11 NITESH SHETTY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="11">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="45">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="9">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#5 PATRICK REGAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="5">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="13">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="8">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="33">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="14">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#7 HARRY SANDHU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="7">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#77 JOHN PINEDA</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="77">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#44 DEVON CARNEY</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="44">OUT</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#17 JUSTIN CONSTANTINEAU</div>
<div class="col-xs-4">
<button class="btn btn-danger btn-xl btn-player-checkin" data-player-id="17">OUT</button>
</div>
</div>
</div>

using ng repeat mouseover ng show

Hi i am displaying a user list using ng repeat.
what i want is when i hover over the user buttons will appear.. and after i leave it will disappear i tried this pls ..
with this code after i hoveer it show icons for whole list
HTML
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover()" ng-mouseleave="hideHover()">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
js
$scope.showHover = function (){
$scope.hoverIcons = true;
}
$scope.hideHover = function (){
$scope.hoverIcons = false;
}

The issue your facing is caused by the missing of an index on your $scope.hoverIcons variable.
You should add and index to your variable name to get a boolean for each person.
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons track by $index" ng-mouseover="showHover($index)" ng-mouseleave="hideHover($index)">
<!-- more code here -->
<div ng-show="hoverIcons{{$index}}">
<!-- more code here -->
</div>
</div>
in addition you should use this index in js :
$scope.showHover = function (index){
$scope['hoverIcons' + index] = true;
}
$scope.hideHover = function (index){
$scope['hoverIcons' + index] = false;
}
I hope it may helps

You can do this as follows;
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons" ng-mouseover="showHover(person)" ng-mouseleave="hideHover(person)">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding">
<button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'" ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div ng-show="person.hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
</div>
.
$scope.showHover = function (person) {
person.hoverIcons = true;
}
$scope.hideHover = function (person) {
person.hoverIcons = false;
}

try this if using of CSS is not an issue.
You can then remove ng-mouseover directives
<style>
.hoverText .hoverIcons {
display:none;
}
.hoverText:hover .hoverIcons {
display:block;
}
</style>
<div class="hoverText card-body row text-center" ng-if="showCase.persons.length != 0" ng-repeat="person in showCase.persons">
<a class="userlist" href="#" ng-click="getProfile(person)">
<div class="hoverText">
<div class="col-md-1 col-xs-1 text-medium text-center">
<img class="img-circle size-1" ng-src="{{person.profile.image_url}}" alt="">
</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.mobile_number}}</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.name+ ' ' +person.profile.lastname}}</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 0">Male</div>
<div class="col-md-1 col-xs-1 text-medium" ng-if="person.profile.gender == 1">Female</div>
<div class="col-md-2 col-xs-2 text-medium">{{person.profile.email}}</div>
</div>
</a>
<div class="col-md-2 col-xs-2 no-padding"><button type="button" class="btn ink-reaction text-bold" ng-class="checkStatus(person.isSuspended)? 'btn-danger':'btn-success'"
ng-click="person.isSuspended = suspendUser(person.uname,!person.isSuspended)">{{suspendText}}</button>
</div>
<div class="hoverIcons">
<div class="messagebtn btn btn-default style-transparent btn-raised" id="message" data-toggle="modal" data-target="#formModal">
<i class="md-message"></i>
</div>
<div class="mailbtn btn btn-default style-transparent btn-raised" id="email" data-toggle="modal" data-target="#formModal">
<i class="md-email"></i>
</div>
<div class="allotbtn btn btn-default style-transparent btn-raised" id="allotforecasts" data-toggle="modal" data-target="#allotforecast">
<i class="md-add-circle-outline"></i>
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Order HTML divs to their corresponding div with JavaScript - javascript

Related

Search filter on div with hidden elements

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

tab is not loading when I click

How to store and retrieve value of button when clicked?

using ng repeat mouseover ng show

Categories

Resources