Struggling to integrate my Bootstrap Framework with Angular 4 - Typescript, I am facing difficulty in getting my Tabbed Registration Form to function correctly.
In Bootstrap, this is the JS file that manages the addition and removal of the active class upon clicking on my tabbed form.
$(document).ready(function(){
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
});
HTML File
<div class="container">
<div class="row">
<!-- Mixins-->
<!-- Pen Title-->
<div class="pen-title">
<h1>Material Login Form</h1>
</div>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button><span>Go</span></button>
</div>
<div class="footer"><a href="#">Forgot your password?</a></div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required"/>
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Repeat Password" required="required"/>
<label for="Repeat Password">Repeat Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button><span>Next</span></button>
</div>
</form>
</div>
</div>
</div>
</div>
Below is the TS File snippet where I attempted to adapt the code to make the Tab work without success.
clicked(event) {
event.target.classList.add('active'); // To ADD
event.target.classList.remove('active'); // To Remove
event.target.classList.close('click'); // To check
event.target.classList.toggle('click'); // To toggle
}
I am aware that there is an error in my approach somewhere, as I am unable to get it to function properly, even though it worked fine in Bootstrap 3 with JS.