Tabs

Address Street Range Account

Property Address

From House Number

To House Number

Street Name

Account Number

HTML

<div class="col-12 offset-1 col-md-10 offset-md-2 col-lg-9 col-xl-8"><div class="tab-block mb--m"><div class="nav nav-tabs d-flex flex-nowrap justify-content-start" id="propertySearchTab" role="tablist"><a class="flex-fill nav-item nav-link active" href="#tab-address" data-toggle="tab" role="tab" aria-controls="tab-address" aria-selected="true">Address</a><a class="flex-fill nav-item nav-link" href="#tab-range" data-toggle="tab" role="tab" aria-controls="tab-range" aria-selected="false">Street Range</a><a class="flex-fill nav-item nav-link" href="#tab-account" data-toggle="tab" role="tab" aria-controls="tab-account" aria-selected="false">Account</a></div><div class="tab-content" id="propertySearchTabContent"><div class="tab-pane fade active show" id="tab-address" role="tabpanel" aria-labelledby="tab-address"><div id="results-message" class="paxl" style="display:none"></div><div id="content_1_pnlSearchByStreet" class="tab-part-content"><fieldset class="m-0 scfSectionBorderAsFieldSet"><legend class="sr-only">Property Search by Address</legend><div id="pnlSearchByStreetFields" class="scfSectionContent" onkeypress='return WebForm_FireDefaultButton(event,"content_1_btnSubmitSearchByStreet")' style="display:none"><div class="scfSingleLineTextBorder"><label for="content_1_txtStreetNumber" id="content_1_lblStreetNumber" class="scfSingleLineTextLabel">House Number</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtStreetNumber" type="text" maxlength="200" id="content_1_txtStreetNumber" class="scfSingleLineTextBox" skinidvalidationgroup="valGroupSearchByStreet"><span id="content_1_regExpValStreetNumber" class="scfValidator" style="display:none">Only letters and numbers can be entered</span></div></div><div class="scfSingleLineTextBorder"><label for="content_1_txtFlatUnitNumber" id="content_1_lblFlatUnitNumber" class="scfSingleLineTextLabel">Flat / Unit Number</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtFlatUnitNumber" type="text" maxlength="200" id="content_1_txtFlatUnitNumber" class="scfSingleLineTextBox"><span id="content_1_regExpValFlatUnitNumber" class="scfValidator" style="display:none">Only letters and numbers can be entered</span></div></div><div class="scfSingleLineTextBorder"><label for="content_1_txtStreetName" id="content_1_lblStreetName" class="scfSingleLineTextLabel">Street Name</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtStreetName" type="text" maxlength="200" id="content_1_txtStreetName" class="scfSingleLineTextBox"></div><span id="content_1_reqFieldStreetName" class="scfValidatorRequired" style="display:none">A Street Name (full or part) must be entered</span></div><div class="scfSubmitButtonBorder mt--xs"><input type="submit" name="content_1$btnSubmitSearchByStreet" value="Search" onclick='WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("content_1$btnSubmitSearchByStreet","",!0,"valGroupSearchByStreet","",!1,!1))' id="content_1_btnSubmitSearchByStreet"></div></div><div id="pnlSearchByAutocomplete" class="scfSectionContent" onkeypress='return WebForm_FireDefaultButton(event,"btnSubmitSearchAutocomplete")' style=""><div id="content_1_div" class="scfSingleLineTextBorder required"><label for="streetName" class="scfSingleLineTextLabel">Property Address</label><div class="scfSingleLineGeneralPanel"><input type="hidden" name="content_1$accountId" id="accountId" value=""> <input name="content_1$streetName" type="text" maxlength="200" id="streetName" class="scfSingleLineTextBox ui-autocomplete-input" autocorrect="off" autocapitalize="words" spellcheck="false" autocomplete="off"></div><span class="scfRequired"></span></div><div class="scfSubmitButtonBorder mt--xs"><input type="submit" name="content_1$btnSubmitSearchAutocomplete" value="Search" id="btnSubmitSearchAutocomplete" class="button w-auto"></div></div><div id="loading-spinner"></div></fieldset></div></div><div class="tab-pane fade" id="tab-range" role="tabpanel" aria-labelledby="tab-range"><div id="content_1_pnlSearchByStreetRange" class="tab-part-content" onkeypress='return WebForm_FireDefaultButton(event,"content_1_btnSubmitSearchByStreetRange")'><fieldset class="m-0 scfSectionBorderAsFieldSet"><legend class="sr-only">Property Search by Street range</legend><div class="scfSectionContent"><div class="scfSingleLineTextBorder"><label for="content_1_txtStreetNumberRangeFrom" id="content_1_lblStreetNumberRangeFrom" class="scfSingleLineTextLabel">From House Number</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtStreetNumberRangeFrom" type="text" maxlength="200" id="content_1_txtStreetNumberRangeFrom" class="scfSingleLineTextBox"><span id="content_1_regExpValStreetNumberRangeFrom" class="scfValidator" style="display:none">Only numbers can be entered</span></div></div><div class="scfSingleLineTextBorder"><label for="content_1_txtStreetNumberRangeTo" id="content_1_lblStreetNumberRangeTo" class="scfSingleLineTextLabel">To House Number</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtStreetNumberRangeTo" type="text" maxlength="200" id="content_1_txtStreetNumberRangeTo" class="scfSingleLineTextBox"><span id="content_1_regExpValStreetNumberRangeTo" class="scfValidator" style="display:none">Only numbers can be entered</span></div></div><div class="scfSingleLineTextBorder"><label for="content_1_txtStreetNameRange" id="content_1_lblStreetNameRange" class="scfSingleLineTextLabel">Street Name</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtStreetNameRange" type="text" maxlength="200" id="content_1_txtStreetNameRange" class="scfSingleLineTextBox"></div><span id="content_1_regExpValStreetNameRange" class="scfValidatorRequired" style="display:none">A Street Name (full or part) must be entered</span></div></div><div class="scfSubmitButtonBorder mt--xs"><input type="submit" name="content_1$btnSubmitSearchByStreetRange" value="Search" onclick='WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("content_1$btnSubmitSearchByStreetRange","",!0,"valGroupSearchByStreetRange","",!1,!1))' id="content_1_btnSubmitSearchByStreetRange" class="button w-auto"></div></fieldset></div></div><div class="tab-pane fade" id="tab-account" role="tabpanel" aria-labelledby="tab-account"><div id="content_1_pnlSearchByAccountNumber" class="tab-part-content" onkeypress='return WebForm_FireDefaultButton(event,"content_1_btnSubmitAccountNumber")'><fieldset class="m-0 scfSectionBorderAsFieldSet"><legend class="sr-only">Property Search by account number</legend><div class="scfSectionContent"><div class="scfSingleLineTextBorder"><label for="content_1_txtAccountNumber" id="content_1_lblAccountNumber" class="scfSingleLineTextLabel">Account Number</label><div class="scfSingleLineGeneralPanel"><input name="content_1$txtAccountNumber" type="text" maxlength="9" id="content_1_txtAccountNumber" class="scfNumberTextBox"><span id="content_1_regExpValAccountNumber" class="scfValidator" style="display:none">Only numbers can be entered</span></div><span id="content_1_reqFieldAccountNumber" class="scfValidatorRequired" style="display:none">An Account Number must be entered</span></div></div><div class="scfSubmitButtonBorder mt--xs"><input type="submit" name="content_1$btnSubmitAccountNumber" value="Search" onclick='WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("content_1$btnSubmitAccountNumber","",!0,"valGroupSearchByAccountNumber","",!1,!1))' id="content_1_btnSubmitAccountNumber" class="button w-auto"></div></fieldset></div></div></div></div></div>

CodeSandBox ↗︎