Hi again great helpers,
Can you please help with toggling button for show/hide?
I actually got the jQuery code here and it works for just one <td>...</td>
What I am trying to do now requires several <tds> and I am struggling to get the textboxes to work.
Please see link of what I am asked to do:
https://www.kenig-dev.tech/wp-content/uploads/2021/06/Consultant-Support-Details.png
As you can see from the link, there is a button called Amend.
If user clicks the Amend button, new blank textboxes are displayed underneath the top boxes.
Then a user can enter data into the blank boxes.
My issue is how to modify the JS to recognize the new blank textboxes.
I have been bugged down now for two days.
//HTML
<script type="text/javascript">
$(function () {
$("#btnta").click(function () {
if ($(this).val() == "Amend") {
$("#dvta").show();
$(this).val("Cancel");
} else {
$("#dvta").hide();
$(this).val("Amend");
}
});
$("#btconsultsup").click(function () {
if ($(this).val() == "Amend") {
$("#dvconsultsup").show();
$(this).val("Cancel");
} else {
$("#dvconsultsup").hide();
$(this).val("Amend");
}
});
});
</script>
//This works perfectly
<label>Proposed activities for next year: </label>
<input id="btnta" type="button" value="Amend" name="btnta" /><br>
<textarea id="taskActivities" class="longText" name="taskActivities" maxlength="4999"></textarea>
<br>
<div id="dvta" style="display: none">
<label>Amended activities for next year: </label> <br>
<textarea id="amended_taskActivities" class="longText" name="amended_taskActivities" maxlength="4999"></textarea>
</div>
<table id="consultantTable">
<tr class="headerRow">
<th class="numberColumn"></th>
<th class="inputColumn">Subtask, if applicable</th>
<th class="inputColumn">Consultant name, if applicable <br><span class="conNotes fieldNotes">If unknown, state 'TBD'</span></th>
<th class="inputColumn">Contract number, if applicable <br><span class="conNotes fieldNotes">If unknown, state 'TBD'</span></th>
<th class="costColumn">Total contract cost:</th>
<th class="costColumn">Pre-FFY 2020 cost:</th>
<th class="costColumn">FFY 2020 cost:</th>
<th class="costColumn">Post-FFY 2020 cost:</th>
<th class="timelineColumn"></th>
</tr>
<tr id="optionsRow0" class="optionsRow collapse order1">
<td></td>
<td></td>
<td class="optionsHeader">Timeline for subtask</td>
<td><div>Scope development and FHWA review/approval:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="scopeDev0" name="scopeDev0" ></td>
<td class="costColumns"><div> Consultant procurement and selection:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="conProcu0" name="conProcu0" ></td>
<td class="costColumns"><div>Contract negotiations and FHWA review/approval:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="contractNegotiations0" name="contractNegotiations0" ></td>
<td class="costColumns"><div>Consultant notice to proceed:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="conNotice0" name="conNotice0"></td>
<td class="costColumns"><div> Total duration of task:<br>
<span class="timelineNotes fieldNotes">(Length of time) e.g. six months</span><br>
</div>
<input class="shortText" id="totalDuration0" name="totalDuration0"></td>
<td></td>
</tr>
<tr class="consultantRow">
<td>1)</td>
<td class="consultantInputCell"><select class="shortText" id="conSubTask0" name="conSubTask0" onchange="">
<option disabled selected hidden>Select</option>
</select></td>
<td class="consultantInputCell"><input class="shortText" id="conName0" name="conName0" maxlength="1999"/></td>
<td class="consultantInputCell"><input class="shortText" id="conSupportNum0" name="conSupportNum0" maxlength="1999"/></td>
<td class="consultantCostCell"><span class="input-group-addon2">$</span>
<input class="shortCosts conSupportContractCosts" id="conSupportContractCosts0" type="text" placeholder="0" name="conSupportContractCosts0" step='0.01' value="0"/></td>
<td class="consultantCostCell"><span class="input-group-addon2">$</span>
<input class="shortCosts conSupportPriorExp" id="conSupportPriorExp0" type="text" placeholder="0" name="conSupportPriorExp0" step='0.01'value="0"/></td>
<td class="consultantCostCell"><span class="input-group-addon2">$</span>
<input class="shortCosts conSupportNexFiscal" id="conSupportNexFiscal0" type="text" placeholder="0" name="conSupportNexFiscal0" step='0.01' value="0"/></td>
<td class="consultantCostCell"><span class="input-group-addon2">$</span>
<input class="shortCosts conSupportBeyondFiscal" id="conSupportBeyondFiscal0" type="text" placeholder="0" name="conSupportBeyondFiscal0" step='0.01' value="0"/></td>
<td class="consultantCostCell"><input type="button" id="addTimeline0" value="Toggle Timeline" tabindex="-1"></td>
<td><input class="remove" type="image" id="conSupportDel0" src="images/delete_hover.png" onclick="return false;" tabindex="-1"></td>
</tr>
<tr id="optionsRow1" class="optionsRow collapse order1">
<td></td>
<td></td>
<td class="optionsHeader">Timeline for subtask</td>
<td><div>Scope development and FHWA review/approval:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="scopeDev1" name="scopeDev1" ></td>
<td class="costColumns"><div> Consultant procurement and selection:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="conProcu1" name="conProcu1" ></td>
<td class="costColumns"><div>Contract negotiations and FHWA review/approval:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="contractNegotiations1" name="contractNegotiations1" ></td>
<td class="costColumns"><div>Consultant notice to proceed:<br>
<span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
</div>
<input class="shortText" id="conNotice1" name="conNotice1"></td>
<td class="costColumns"><div> Total duration of task:<br>
<span class="timelineNotes fieldNotes">(Length of time) e.g. six months</span><br>
</div>
<input class="shortText" id="totalDuration1" name="totalDuration1"></td>
<td></td>
</tr>
</table>
