I am trying to get an email form to show when the email icon is clicked. I tried used Bootstrap collapsible but it wouldn't let me change where the form showed up. It kept showing beneath so I changed to trying to just hide the div then display when icon clicked but nothing is happening with the code I wrote.
$('#emailLink').click(function() {
$('#formBox').css('display', 'block');
});
#formBox {
Background-color: red;
Border-radius: 10px;
Font-style: arial;
Text-align: center;
Align-items: center;
Justify-content: center;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><div id='formBox'><div class="container"><h1>Get in touch!</h1><!-- <div id="error"><? echo $error.$successMessage; ?></div> --><form method="post"><fieldset class="form-group"><label for="email">Email address</label><input type="email" class="form-control" id="email" name="email" placeholder="Enter email"><small class="text-muted">We'll never share your email with
anyone else.</small></fieldset><fieldset class="form-group"><label for="subject">Subject</label><input type="text" class="form-control" id="subject" name="subject"></fieldset><fieldset class="form-group"><label for="exampleTextarea">What would you like to ask us? </label><textarea class="form-control" id="content" name="content" rows="3"></textarea></fieldset><button type="submit" id="submit" class="btn btn
primary">Submit</button></form></div></div><h2> Contact Us!</h2><br><a id='emailLink' href="#emailForm">Email Link<i class="far fa-envelope fa-2x"> </i></a><p></p><i class="fas fa-phone fa-2x"></i><p></p>