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.
Related
I have a code like this
<div class="col-md-12 p-0 m-0" type="button" data-toggle="collapse" data-target="#collapseFace" aria-expanded="false" aria-controls="collapseExample">
<div class="border-bottom border-top f-sz-18">
Face
</div>
</div>
<div class="collapse" id="collapseFace">
<div>
<div><a class="text-decoration-none text-dark f-sz-15 ml-3" href="">123</a></div>
</div>
</div>
How to disable so that the drop-down list does not work when following a link?
When I click on a link, for a split second I see how it starts to open, it's unpleasant
I have written a Reactive form. The submit button is supposed to be outside the Reactive form.It has also got two dropdowns. In this form im reading data dynamically from api. I have written click events in the dropdown as well(for a purpose to bind that particular value when i submit the form). The issue here is that whenever i click on the dropdown...the submit button click event is getting triggered....i have been trying to make them(the three click events) be unique...but im unable to.... kindly help me. Below im providing my code.
<div class="container content-box-shadow tiles-top-spacing tiles-page">
<div class="row assessment-m-b">
<div class="col-lg-12 col-md-12 pt-3 pb-5">
<div class="d-flex align-items-center justify-content-between">
<span class="common-headding">{{pageText?.accountSettingPageTextData?.editHeader}}</span>
<div>
<button type="submit" class="common-button green"
(click)="onSubmit()">{{pageText?.accountSettingPageTextData?.save}}</button>
<button type="button"
class="common-button orange" (click)="previousModule()">{{pageText?.accountSettingPageTextData?.cancel}}</button>
</div>
</div>
<div class="account-settings-block">
<form *ngIf="personalData" [formGroup]="accountSettingsForm" >..................................................
<!-- Account-Settings Security Questions -->
<div *ngIf=" personalData?.dashBoardPersonalInfoData?.securityQuestionsAnswers.isVisible"
class="account-form-inner-block">
<legend>{{pageText?.accountSettingPageTextData?.questions?.header}}<span class="required">**</span></legend>
<div class="row">
<div class="col-md-6">
<div>
<label for="question1">
{{pageText?.accountSettingPageTextData?.questions?.question1}}
</label>
<div class="btn-group w-100 pt-1" ngbDropdown>
<button class="btn btn-secondary dropdown-toggle w-100 text-left"
aria-haspopup="true" aria-expanded="false" id="dropdownMenu1"
ngbDropdownToggle>
<span *ngIf="!SecurityQuestion1.question">
Select a Question
</span>
<span *ngIf="SecurityQuestion1.question">
{{SecurityQuestion1.question}}
</span>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
<button (click)="selectQuestion1(questions)"
*ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
class="dropdown-item">{{questions?.question}}
</button>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="col-md-6">
<div>
<label for="question2">
{{pageText?.accountSettingPageTextData?.questions?.question2}}
</label>
<div class="btn-group w-100 pt-1" ngbDropdown>
<button class="btn btn-secondary dropdown-toggle w-100 text-left"
aria-haspopup="true" aria-expanded="false" id="dropdownMenu2"
ngbDropdownToggle>
<span *ngIf="!SecurityQuestion2.question">
Select a Question
</span>
<span *ngIf="SecurityQuestion2.question">
{{SecurityQuestion2.question}}
</span>
</button>
<div class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownMenu">
<button (click)="selectQuestion2(questions)"
*ngFor="let questions of personalData?.dashBoardPersonalInfoData?.securityQuestions"
class="dropdown-item">{{questions?.question}}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I could solve my issue above by using form="myForm" attribute in the save button. and using id="myForm" attribute in the form tag.....just by using those attributes....i could have unique trigger for all the three events......Im stilll keeping posted so that someone neednot have to waste almost 4hours or more in finding it out....
Lets say I've got a collapsible menu with two buttons that will display their corresponding content when clicked. If one is opened, it should close when the other button is clicked. I want to repeat this content x number of times.
<div *ngFor="let item of array; let i = index" class="container" id="myGroup">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
Content 1 here
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
Content 2 here
</div>
</div>
</div>
I want each of divs with the class container to have their own unique id to match with its content's data-parent attribute. Something like this:
<div *ngFor="let item of array; let i = index" class="container" id="myGroup{{i}}">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup{{i}}">
<div class="card card-body">
Content 1 here
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup{{i}}">
<div class="card card-body">
Content 2 here
</div>
</div>
</div>
My goal is to create a couple of buttons that I can print to the page x number of times. Each time a new set is printed to the page, it's buttons will only respond to its unique ids and data-parents. I tried it just like what I included above, but got the following error:
Uncaught Error: Template parse errors:
Can't bind to 'parent' since it isn't a known property of 'div'.
Is this even possible? Any help is appreciated.
You should use [attr.data-parent] to set the data-parent attibute.
in your case [attr.data-parent] =" '#myGroup' + i"
Use attribute binding syntax instead
Eg
[attr.data-parent]="'#myGroup' + i"
and you can also check with condition i am giving you an example link
How to add conditional attribute in Angular 2?
This question already has answers here:
Bootstrap: Collapse other sections when one is expanded
(13 answers)
Closed 6 years ago.
I am trying to find a way to implement bootstrap buttons which will show collapsible content without allowing the content of more than one button to show at any time.
I can get the buttons to trigger collapsible content but I cant find a way to stop them both being un-collapsed at the same time:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
js fiddle demo here: https://jsfiddle.net/hzs68sne/
What you want to achieve looks like the collapse accordion.
To do this with your current setup, you can wrap the entire group in a single .panel div and make use of the data-parent attribute.
<div id="container">
<div class="panel">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" data-parent="#container">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" data-parent="#container">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/gbfb32z9/
Keep in mind:
The .panel div needs to be a direct child of the data-parent element.
The .collapse elements are direct children of a .panel element.
I am building a responsive calendar that has full-width buttons on it (events), and it shows extra info with the collapse component under it. But the button keeps appearing superimposed so it doesn't display the info correctly...
This is one of my event buttons:
<!--Event 1-->
<div class="div-event col-md-6">
<span class="date-event col-xs-2 col-md-1"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something but I can't be seen because of the weird css I have!
</div>
</div>
<div class="clearfix"></div>
</div>
I have tried using margin-top and position but it hasn't worked.
Is there a way to "separate" the collapse from the parent row? Or any other way to do it?
Here is the full calendar: https://jsfiddle.net/mrndrmrj/16/
In following span add margin-bottom:10px
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-1" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
Well, I found that the problem was grouping the event with the collapsable "well", so putting the well outside the div-event made it work!
This is one of the events corrected:
<!--Event 1-->
<div class="div-event">
<span class="date-event col-xs-2 col-md-2"><span class="num-date-event">22</span><br>SEP</span>
<button class="btn btn-event btn-block col-xs-8 col-md-8" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Kate's Super Party<br>at her house</button>
<span class="glyphicon glyphicon-gift icon-event col-xs-2 col-md-2" aria-hidden="true"><span class="text-event"><br>PARTY</span></span>
<div class="clearfix"></div>
</div>
<div class="collapse" id="collapse-1">
<div class="well">
Hi, I'm a collapsable well that shows something and now I can be seen, but not the last two guys.
</div>
</div>
And this is the updated fiddle with the first two events corrected and the last two wrong so you can see the difference...
https://jsfiddle.net/mrndrmrj/20/