I have this HTML code in an Angular application and I want to display ID_EXPEDIENTE when you select it. However, when I click on it, nothing happens.
<div class="accordion" id="accordionIDExpedientes" >
<div class="card" *ngFor="let ACPGPAE of ACPGPA.AuditedClientPeriodFileFieldGroupsAcreditadoExpedientes">
<div class="card-header">
<h5 class="mb-0">
<button class="btn btn-link btn-acreditados" data-toggle="collapse" attr.data-target="#{{ACPGPAE.ID_EXPEDIENTE}}" aria-expanded="true" attr.aria-controls="{{ACPGPAE.ID_EXPEDIENTE}}">
EXPEDIENTE: {{ACPGPAE.ID_EXPEDIENTE}}
</button>
</h5>
</div>
<div attr.id="{{ACPGPAE.ID_EXPEDIENTE}}" class="collapse show" data-parent="#accordionIDExpedientes">
<div class="card-body">
{{ACPGPAE.DIAS_IMPAGO}}
</div>
</div>
</div>
</div>
Can you help me?
Thank you!
Related
I am new to the Django template language and I am playing around with bootstrap collapses to display my items. Below is my code:
{% for item in items %}
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{item.item_name}}
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
{{item.description}}
</div>
</div>
</div>
</div>
{% endfor %}
This is taken from the Bootstrap documentation for collapse, here. In this implementation, all of the items passed in would have the same id, collapseOne. So whenever I click on an item, any item, it would collapse/uncollapse every item on the page. I've tried id="collapse{{item.item_name}}" but that doesn't seem to work. Is there a way to pass in variables in <div> id?
try this
{% for item in items %}
<div id="accordion">
<div class="card">
<div class="card-header" id="heading{{forloop.counter}}">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{forloop.counter}}" aria-expanded="true" aria-controls="collapse{{forloop.counter}}">
{{item.item_name}}
</button>
</h5>
</div>
<div id="collapse{{forloop.counter}}" class="collapse show" aria-labelledby="heading{{forloop.counter}}" data-parent="#accordion">
<div class="card-body">
{{item.description}}
</div>
</div>
</div>
</div>
{% endfor %}
https://docs.djangoproject.com/en/3.1/topics/templates/#the-django-template-language
A button is created for each question from the database, when clicked, only one answer should be opened. But instead, when you click on any of the buttons, all answers open.
So far I've tried to change "collapse" to "${question.id}", but it seems to me that it doesn't work this way.
<div class="card-columns">
<#list questions as question>
<div class="card border-light mb-3 bg-card">
<div class="m-2">
<p>
<button class="btn btn-info" type="button"
data-toggle="collapse"
data-target="#collapse"
aria-expanded="false"
aria-controls="collapse">
${question.question}
</button>
</p>
</div>
<div class="m-2">
<div class="collapse" id="collapse">
<div class="card card-body border-info">
${question.answer}
</div>
</div>
</div>
<#else>
There is no questions.
</#list>
</div>
</div>
You need to change "collapse" to $question.id in 2 line:
<button ... data-target="#collapse"
and
<div ... id="collapse">(id not class).
I dont familiar with freemarker, so cant provide full fix.
If I copy this code twice in a page for a Bootstrap collapsible, one toggle button will affect other toggles, causing everything to expand or collapse.
How would I resolve this issue? Each collapsible should only affects its own set.
The end goal is to have a collapsible as a shared component. So if I copy it 3,4,5, 100 times in a page, other ones should not be affected. (will be using C# extension methods later).
https://getbootstrap.com/docs/4.0/components/collapse/
Please copy code twice in a page.
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
aria-controls="collapseOne1">
<h5 class="mb-0">
Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
data-parent="#accordionEx">
<div class="card-body">
1111 test
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
aria-expanded="false" aria-controls="collapseTwo2">
<h5 class="mb-0">
Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
data-parent="#accordionEx">
<div class="card-body">
2222 test
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
aria-expanded="false" aria-controls="collapseThree3">
<h5 class="mb-0">
Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
data-parent="#accordionEx">
<div class="card-body">
3333 test
</div>
</div>
</div>
<!-- Accordion card -->
</div>
Looking to isolate the behavior. Would like to avoid javascript route, but if needed thats fine. Maybe something to do with everyone sharing same Id, data-parents, etc.
When using Bootstrap's Accordion, especially when you are just copying the cards, don't forget to check that the id of the card body MUST be unique and the href of the card header must match it.
WRONG (both card body have the same id, which is collapseOne):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
<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" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Body of Collapsible #1
</div>
</div>
</div>
<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="collapseOne" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Body of Collapsible #2
</div>
</div>
</div>
</div>
CORRECT (each card body has its own id):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
<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" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Body of Collapsible #1
</div>
</div>
</div>
<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" data-parent="#accordionExample">
<div class="card-body">
Body of Collapsible #2
</div>
</div>
</div>
</div>
I am trying to implement an Accordion button on my webpage using the HTML code given below. I am currently implementing this on a very basic scale without using any javascript code with this accordion snippet.
The button just clicks and does nothing and the basic collapsing doesn't take place nor does the accordion functionality is implemented.
Kindly help me in implementing this!
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" type="button"
data toggle="collapse" data-target="#collapseButtonExample" aria-
expanded="true" aria-controls="collapseExample">Question
</button>
</div>
<div class="collapse" id="collapseButtonExample" >
<div class="card card-body">
<p></p>
</div>
</div>
</div>
Something like this will work if there is single element
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" type="button" #btn (click)="btn.toggle = !btn.toggle"
>Question
</button>
</div>
<div [ngClass]="{collapse:!btn.toggle}" >
<div class="card card-body">
<p>1# something</p>
</div>
</div>
</div>
if you have many element this trick will work
<div class="panel panel-default" *ngFor="let i of [1,2,3,4]">
<div class="panel-heading">
<button class="btn btn-primary" type="button" #btn (click)="btn.toggle = !btn.toggle"
>Question
</button>
</div>
<div [ngClass]="{collapse:!btn.toggle}" >
<div class="card card-body">
<p>{{i}}# something</p>
</div>
</div>
</div>
stackblitz demo 🚀🚀
I found that somebody else asked the same question and received no answer. I am using Bootstraps data-toggle for an accordion and it is not working on mobile (not just IOS but it's not working on chrome developer tools or my Galaxy S8).
<!-- How it Works -->
<div id="howItWorks" class="interiorContent">
<div class="container">
<div class="intContHead">
<h2>How it Works</h2>
</div>
<div class="accordion" id="howItWorksAccordion">
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<a role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" data-target="#collapseOne" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Step 1: Create ASComm.NET Configuration File
</a>
</h6>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#howItWorksAccordion">
<div class="card-body">
<p>For more advanced applications (branded, database, etc.), you can build your own configuration
application that utilizes ASComm.NET's configuration and serialization capabilities.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Step 2: Add ASComm Excel Add-in to Excel.
</a>
</h6>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#howItWorksAccordion">
<div class="card-body">
<p>
<strong>NOTE: Step 2 only needs to be perfomed once. If you have already added ASComm.NET Excel Add-in
to Excel, proceed to Step 3.</strong>
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Step 3: Configure ASComm.NET Excel Add-in Operating Parameters
</a>
</h6>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#howItWorksAccordion">
<div class="card-body">
<p>3.1 Locate the ASComm.NET tab on the Excel ribbon</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseFour" aria-expanded="false"
aria-controls="collapseFour">
How to Read and Log Data
</a>
</h6>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#howItWorksAccordion">
<div class="card-body">
<img alt="Excel AddIn Ribbon" class="img-responsive" src="../../../images/ascomm_excel_addin_ribbon.png">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseFive" aria-expanded="false"
aria-controls="collapseFive">
How to Write Data
</a>
</h6>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#howItWorksAccordion">
<div class="card-body">
<!--Manual Start-->
<p>ASComm Excel Add-in can read data from hardware devices and populate Excel spreadsheets without
writing any code.</p>
</div>
</div>
</div>
</div>
</div>
</div>
I tried adding curser: pointer to my a tags and I tried changing the a tags to button tags. I watched the elements in chrome developer tools as I clicked on the links - the first card changes from class="collapse show" to class="collapsing" to class="collapse" yet nothing happens. (The first card is supposed to be shown upon page visit).
Pasted your code in a ongoing project file...uploaded on web server...EVERYTHING WORKED FINE... Tested on Chrome Mobile Browser... version 68.0 ...
Versions I was using (If it helps):
Bootstrap 4.1.2
JQuery 3.3.1
Popper.js 1.14.3