We Keep Coding

How to make a custom pop up when a button is clicked?

I have a webpage with a lot of buttons on it and I've made a custom popup that should popup in the center of the screen when a button is clicked. Ideally the screen darkens when the window comes up and you can click off anywhere on the screen to make the window go away.
How is this done? Below is a snippet of my buttons + the popup I'd like to display when a button is pressed. The CSS window has display:hidden at the moment however.
var containerDiv = document.querySelector("#main");
let tempCounterBtn = 0;
for (let i = 0; i < 2; i++) {
let newDiv = document.createElement("div");
newDiv.id = "div-" + (i + 1);
containerDiv.appendChild(newDiv);
for (let x = 0; x < 6; x++) {
let btn = document.createElement("button");
btn.id = "button-" + (tempCounterBtn + 1);
tempCounterBtn++;
newDiv.appendChild(btn);
}
}
body {
display: flex;
justify-content: center;
margin: 1.2em;
}
button {
background: rgba(0, 0, 0, 0);
color: #a5afaa;
border: 1px solid white;
border-radius: .6em;
padding: 3em;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em yellow;
}
#main {
border: solid 2px #939388;
border-radius: 10px;
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}
.inner {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding: 20px;
}
.smallFrame {
display: none;
border: solid 2px #939388;
border-radius: 10px;
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
width: 400px;
height: 250px;
}
<div id="main">
<div id="inner-15" class="inner"></div>
</div>
<div class="smallFrame"></div>

Changes
div#main has been changed to dialog#main. <dialog> is a built-in HTML tag and is normally hidden unless it has the open attribute or has been opened by one of it's methods either .showModal() or .show(). .showModal() is what you'd be interested in because there's a special CSS property that only applies to fullscreen backgrounds or a dialog's backdrop -- it's appropriately called ::backdrop (see CSS of example).
Added 2 buttons one to close the <dialog> and another to open it.
Added a flag which is true to start out at then once the <dialog> opens that button generating function starts and then that flag is set to false. I had to stop it because I'm not sure if you wanted it to keep making buttons every time the <dialog> opens or not. Anyways, the flag is easily removed or you could adjust the conditions in which the flag is set to.
const modal = document.querySelector(".smallFrame");
const show = document.querySelector('.show');
const hide = document.querySelector('.hide');
let flag = true;
show.onclick = popUp;
hide.onclick = e => modal.close();
function popUp(e) {
modal.showModal();
if (!flag) {
return;
}
let tempCounterBtn = 0;
for (let i = 0; i < 2; i++) {
let newDiv = document.createElement("div");
newDiv.id = "div-" + (i + 1);
modal.appendChild(newDiv);
for (let x = 0; x < 6; x++) {
let btn = document.createElement("button");
btn.id = "button-" + (tempCounterBtn + 1);
tempCounterBtn++;
newDiv.appendChild(btn);
}
}
flag = false;
}
html {
font: 300 2ch/1.25 'Segoe UI'
}
body {
display: flex;
justify-content: center;
margin: 1.2em;
}
button {
background: rgba(0, 0, 0, 0);
color: #a5afaa;
border: 1px solid white;
border-radius: .6em;
padding: 3em;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em yellow;
}
#main {
border: solid 2px #939388;
border-radius: 10px;
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}
#main::backdrop {
background: rgba(0, 0, 0, 0.5);
}
.inner {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding: 20px;
}
.smallFrame {
border: solid 2px #939388;
border-radius: 10px;
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
width: 400px;
height: 250px;
}
.hide {
padding: 0.5em;
float: right;
}
.show:hover,
.hide:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em lime;
cursor: pointer;
}
<div id="main">
<div id="inner-15" class="inner"></div>
</div>
<button class='show'>Show</button>
<dialog class="smallFrame">
<button class='hide'>Close</button>
</dialog>

remove tooltip transparency

I have one icon. When you hover over the icon with the cursor, the tooltip opens. But when the tooltip is opened, it appears in the input on the back.
Here is the problem;
How can I solve this problem?
html
<div className="installmentinfo__container">
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{billDate}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
background-color: white;
top: 210px;
margin: auto;
transform: translateX(-280px);
padding: 0.3em;
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
padding-bottom: 5px ;
}
}
}

The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
So if you don't have any other z-indexes event 9 will do the job :
.installmentinfo__container {
z-index: 9; ..

If 2 different radios are selected, Do something

I essentially have 1 radio selection with a few colours, all with the same attributes, just different values, using an onclick event to pass on the value. worked great, it would allow the user to click on a color(radio) and it would display an image.
Working fiddle - https://jsfiddle.net/ktmzy8L0/
The above now includes another radio selection called pattern. But every where I searched cant seem to find an answer to solve this.
Essential - If the user selects 2 separate radios [different names], show a different picture. If you are following the jsfiddle it would show a blue diamond(I would use a url to show the image depending on the 2 radio values they choose) and the image would popup in showpicture.
The below code I originally have for jquery
function CB(colorbackground) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (colorbackground == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text('Navy Blue Pattern');
}
}

This code makes it more dynamic. Simply add data-color='ff0000' to the bg color radio buttons. Then this code will simply take the selected pattern value and bg color radio and show the title and selected bgcolor.
bgcolor = "";
pattern = "";
$("input[type='radio']").on("change",function(){
if($(this).prop("name") == "properties[Background Color]"){
bgcolor = $(this);
}
else if($(this).prop("name") == "properties[Background Pattern]"){
pattern = $(this);
}
if(bgcolor && pattern){
$('#showpictureheader').show();
$('#showpicture').show();
url = "https://www.colorhexa.com/" + bgcolor.data("color") + ".png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
$('#showpictureheader').text(bgcolor.val() + ' ' + pattern.val());
}
});
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader{
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input data-color="000080" id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

here is, you should separate to one more function.
function CB(bg) {
var url;
$('#showpictureheader').show();
$('#showpicture').show();
if (bg == "Navy Blue") {
url = "https://www.colorhexa.com/023333.png";
document.getElementById("showpicture").style.backgroundImage = "url(" + url + ")";
}
}
function secondcb() {
$('#showpictureheader').text('Navy Blue Pattern');
}
.background-choices label>input {
visibility: hidden;
position: absolute;
}
.background-choices label>input+img {
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 0 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}
#media only screen and (min-width: 500px) {
.background-choices label>input+img {
border: 2px solid transparent;
width: 40px;
height: 40px;
}
}
.background-choices label>input:checked+img {
border: 5px solid #fd8252;
}
.background-choices label>input:not(:checked)+img {
border: 5px solid #f4f5f5;
}
.background-choices label:hover {
opacity: 0.6;
}
.background-tab-wrapper h3 {
margin-top: 10px;
}
#showpictureheader {
display: none;
}
.showpictureheader {
text-align: center;
padding-bottom: 10px;
}
#showpicture {
border: 5px solid #f4f5f5;
cursor: pointer;
border-radius: 20px;
width: 250px;
height: 250px;
margin: 10px 10px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: auto;
display: none;
background-size: contain;
}
<div class="background-choices">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h3>Color</h3>
<label>
<input id="background-choice-input1" type="radio" name="properties[Background Color]" class="background-choices-selector" value="Navy Blue" onClick="CB(this.value);"/>
<img src="https://www.colorhexa.com/000080.png">
</label>
<h3>Pattern</h3>
<label>
<input onchange="secondcb()" id="background-choice-input2" type="radio" name="properties[Background Pattern]" value="Diamond"/>
<img src="https://w7.pngwing.com/pngs/884/524/png-transparent-diamond-rhombus-shape-oval-outline-s-blue-angle-white-thumbnail.png">
</label>
</div>
<div class="showpictureheader">
<h7 id="showpictureheader"></h7>
</div>
<div id="showpicture">
</div>

jQuery - one trigger 2 buttons with different outcome

I have the following situation see this fiddle: https://jsfiddle.net/rmt70fjw/
In this example there are 2 buttons where only one of them (register-trigger) triggers a popup to open. The other button login-trigger doesn't do this. This situation together with the HTML is a given, and cannot be changed. Be aware that the popup generator is more complex, than just the click on hide example here.
What I am trying to do is that login-trigger opens as well the popup via the register-trigger button and hides the registration form and shows the login form. And for the register-trigger button the other way around. Currently they arrive in a loop because of the popup trigger.
How do I do this? See fiddle with below jQuery attempt and problem.
jQuery
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is the current attempt
jQuery('.login-trigger, .register-trigger').click(function(e){
if(e.currentTarget == '.register-trigger'){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
} else {
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
jQuery('a.register-trigger').trigger('click');
}
});

You could just add the .register-trigger class to your login button aswell in that case. That will trigger all events of your plugin on the login button click. If you then need some special logic like hiding the register form add some Event handler for your login-trigger
$('.login-trigger').addClass('register-trigger');
// PLUGIN CODE START
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// PLUGIN CODE END
jQuery('.register-trigger').click(function(){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
jQuery('.login-trigger').click(function(e){
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
body { background-color: #ddd; }
p { width: 100%; }
.popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
margin: 0 20%;
width: auto;
height: 66%;
background-color: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.hide { display: none; }
form {
margin: 0.5rem;
display: inline-flex;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
width: 300px;
height: 300px;
text-align: center;
}
#close {
position: absolute;
top: 0;
left: -1.75rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
background-color: white;
padding: 0.5rem;
transition: 0.3s all;
}
.btn-wrapper {
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
}
a {
width: 200px;
margin: 0 1rem;
line-height: 1.4;
text-align: center;
font-size: 1.2rem;
padding: 0.5rem;
background-color: #eee;
color: #333;
border-radius: 0.5rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
transition: 0.3s all;
}
a:hover, #close:hover {
background-color: #fff;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="popup hide">
<form class="login-form">
<p style="padding:1rem 3rem;text-align:center;">This is the login form</p>
</form>
<form class="register-form">
<p style="padding:1rem 3rem;text-align:center;">This is the registration form</p>
</form>
<div id="close">X</div>
</div>
<div class="btn-wrapper">
<a class="register-trigger">Register</a>
<a class="login-trigger">Log In</a>
</div>
</body>

Here is the code of jQuery which will work for you!
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
jQuery('.login-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
jQuery('.register-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});

Ok, if i understood correctly, it should work like this. Alert should pop up with both buttons.
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
$('.login-trigger, .register-trigger').click(function(e){
$('.popup').removeClass('hide');
if(e.currentTarget == $('.register-trigger').get(0)){
alert("test");
$('.popup .register-form').removeClass('hide');
$('.popup .login-form').addClass('hide');
}
else
{
$(".register-trigger").trigger('click');
$('.popup .login-form').removeClass('hide');
$('.popup .register-form').addClass('hide');
}
});

I'm struggling to get this jquery slide down and up to work

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>

I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>