Reputation: 2200
I have some complex html, and a little button-dropdown that auto populates certain fields with predetermined values. When I click one of the options on that button, the javascript function fires but the accordion collapses, which prevents the user from seeing the results of clicking that button. In addition to that, clicking anywhere else in the accordion collapses it, which prevents the user from filling in any fields.
How do I prevent this behaviour so that only when you click on the panel heading, it closes?
A sample of my HTML:
<div class="panel panel-default" data-toggle="collapse" data-target="#collapse-7">
<div class="panel-heading">
<h3 class="panel-title" style="font-size: 20px">TAXATION (Residual)</h3>
</div>
<div id="collapse-7" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 bg-info">
<h4>Rating criteria:</h4>
<div class="col-sm-4"><p>1: Not capable of performing</p><p>2: Capable with significant / frequent intervention</p></div>
<div class="col-sm-4"><p>3: Capable with limited / periodic intervention</p><p>4: Capable with no intervention</p></div>
<div class="col-sm-4"><p>A: Advanced experience</p><p>B: Basic experience</p></div>
</div>
<div class="col-lg-2">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Default all to... <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" onclick="defaulter('7', 'A')">A</a></li>
<li><a href="#" onclick="defaulter('7', 'B')">B</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<table class="table">
<tbody><tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)1 - Calculates income tax payable & prepares income tax return for an individual
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)1.1</td>
<td style="vertical-align: middle; width: 60%">Collects and calculates the information needed to file the tax return for an individual, considering: · inclusion and classification of income from different sources (for example, employment including fringe benefits and lump sum benefits, property, business, capital gain / loss, other income ) · exclusion of exempt income · deductibility of expenses (for example, contributions to pension or retirement funds, income protection policies, assets used for trade purposes, legal fees and study at home)</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[0].CompetencySkillId" value="TX(R)1.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[0].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[0].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)1.2</td>
<td style="vertical-align: middle; width: 60%">Prepares the income tax return</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[1].CompetencySkillId" value="TX(R)1.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[1].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[1].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[2].CompetencySkillId-Reflection" value="TX(R)1"><textarea rows="3" name="values[2].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[3].CompetencySkillId-Comment" value="TX(R)1"><textarea rows="3" name="values[3].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)2 - Calculates income tax payable & prepares income tax return for a corporation
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)2.1</td>
<td style="vertical-align: middle; width: 60%">"Collects and calculates the information needed to file the tax return for a corporation, considering: • type of corporation (for example, private, public, small business corporation, employment, foreign) • inclusion and classification of income (for example, active business income, income from property, capital gains, exemptions) • deductibility of expenses (for example, capital allowances, assessed losses and special allowances) • tax deductions and credits (for example, small business deduction, general tax reduction) • type of corporation (for example, private, public, small business corporation, employment, foreign)</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[4].CompetencySkillId" value="TX(R)2.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[4].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[4].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)2.2</td>
<td style="vertical-align: middle; width: 60%">Prepares the Income Tax return</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[5].CompetencySkillId" value="TX(R)2.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[5].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[5].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)2.3</td>
<td style="vertical-align: middle; width: 60%">Calculates secondary tax on companies or equivalent shareholder tax</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[6].CompetencySkillId" value="TX(R)2.3">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[6].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[6].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[7].CompetencySkillId-Reflection" value="TX(R)2"><textarea rows="3" name="values[7].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[8].CompetencySkillId-Comment" value="TX(R)2"><textarea rows="3" name="values[8].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)3 - Calculates other taxes payable & prepares appropriate returns
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)3.1</td>
<td style="vertical-align: middle; width: 60%">Calculates the appropriate CGT tax payable on qualifying transactions</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[9].CompetencySkillId" value="TX(R)3.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[9].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[9].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)3.2</td>
<td style="vertical-align: middle; width: 60%">Records indirect taxes (VAT) for transactions in accordance with relevant legislation</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[10].CompetencySkillId" value="TX(R)3.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[10].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[10].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)3.3</td>
<td style="vertical-align: middle; width: 60%">Prepares the indirect tax (VAT) return</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[11].CompetencySkillId" value="TX(R)3.3">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[11].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[11].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[12].CompetencySkillId-Reflection" value="TX(R)3"><textarea rows="3" name="values[12].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[13].CompetencySkillId-Comment" value="TX(R)3"><textarea rows="3" name="values[13].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr style="background-color: #DDD;">
<th colspan="5" style="font-size: 16px">
Competency: TX(R)4 - Discloses all tax information and computations correctly in the financial statements
</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: middle">Tasks to be performed:</th>
<th></th>
<th style="text-align: center; vertical-align: middle">Your Rating</th>
<th style="text-align: center; vertical-align: middle">
A / B
</th>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)4.1</td>
<td style="vertical-align: middle; width: 60%">Discloses all relevant tax information and amounts in the financial statements of an entity in accordance with guidance provided by the relevant accounting standards</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[14].CompetencySkillId" value="TX(R)4.1">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[14].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[14].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td style="vertical-align: middle">TX(R)4.2</td>
<td style="vertical-align: middle; width: 60%">Calculates and correctly discloses deferred tax in an entity’s financial statements</td>
<td></td>
<td style="vertical-align: middle">
<input type="hidden" name="values[15].CompetencySkillId" value="TX(R)4.2">
<input style="text-align: center" min="1" max="4" data-bv-integer="true" data-bv-greaterthan-message="Invalid input" data-bv-greaterthan="true" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-value="0" type="number" name="values[15].Rating" class="form-control">
</td>
<td style="vertical-align: middle">
<input style="text-align: center;" pattern="([ABab])" data-bv-regexp-message="This value must be A or B" type="text" name="values[15].AorB" class="form-control AorB-7">
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s reflection on professional skills utilised in demonstrating their competence in the performance of these tasks:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[16].CompetencySkillId-Reflection" value="TX(R)4"><textarea rows="3" name="values[16].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<div class="form-group">
<label class="col-sm-4 control-label">
Trainee’s comment i.r.o. reviewer’s rating for this competency:
</label>
<div class="col-sm-8">
<input type="hidden" name="values[17].CompetencySkillId-Comment" value="TX(R)4"><textarea rows="3" name="values[17].Rating" class="form-control"></textarea>
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
Upvotes: 0
Views: 72
Reputation: 29278
You have the data-toggle
applied to the panel. Like so:
<div class="panel panel-default" data-toggle="collapse" data-target="#collapse-7">
Try applying it to the header only:
<div class="panel panel-default"> // Removed attributes.
<div class="panel-heading" data-toggle="collapse" data-target="#collapse-7">
That seems to do the trick!
Upvotes: 3