I have been working on two tabs (tab-one, tab-two) where one is visible and the other is hidden. However, there has been an issue where the code breaks between the bottom of tab-one and the top of tab-two, causing some portion of tab-two to be occasionally visible.
Here is the functional code that typically works correctly
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-one">
<div class="form-group reg-form-group-mar">
<div class="row">
<div class="col-md-6 reg-form-col-6">
<div class="reg-lab-hi">
<label for="firstname">First Name</label>
</div>
<input type="firstname" class="form-control input-title firstname" id="firstname" name="firstname">
<div class="reg-err"></div>
</div>
<div class="col-md-6 ">
<div class="reg-lab-hi"><label for="lastname">Last Name</label></div>
<input type="lastname" class="form-control input-title lastname" id="email" name="email" >
<div class="reg-err"></div>
</div>
</div>
</div>
</div>
<div class="tab-two display-none">
<div class="form-group reg-form-group-mar">
<div class="row">
<div class="col-md-6 reg-form-col-6">
<div class="reg-lab-hi">
<label for="email">Email</label>
</div>
<input type="email" class="form-control input-title email" id="email" name="email">
<div class="reg-err"></div>
</div>
<div class="col-md-6 ">
<div class="reg-lab-hi"><label for="password">Password</label></div>
<input type="password" class="form-control input-title password" id="password" name="password">
<div class="reg-err"></div>
</div>
</div>
</div>
</div>Sometimes the code breaks in this manner
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-one">
<div class="form-group reg-form-group-mar">
<div class="row">
<div class="col-md-6 reg-form-col-6">
<div class="reg-lab-hi">
<label for="firstname">First Name</label>
</div>
<input type="firstname" class="form-control input-title firstname" id="firstname" name="firstname">
<div class="reg-err"></div>
</div>
<div class="col-md-6 ">
<div class="reg-lab-hi"><label for="lastname">Last Name</label></div>
<input type="lastname" class="form-control input-title lastname" id="lastname" name="lastname">
<!-- {{ code breaks here }} -->
<label for="email">Email</label>
</div>
<input type="email" class="form-control input-title first-name" id="email" name="email">
<div class="reg-err"></div>
</div>
<div class="col-md-6 ">
<div class="reg-lab-hi"><label for="email">Password</label></div>
<input type="password" class="form-control input-title password" id="password" name="password">
<div class="reg-err"></div>
</div>
</div>
</div>
</div> I am currently using custom jQuery to handle the tab visibility. I have tried adjusting the order of the Bootstrap link and my own CSS, as well as placing JavaScript at different locations within the HTML document, but the issue persists. If you have any suggestions or solutions, please let me know!
Any advice on how to resolve this problem would be greatly appreciated.