Develop Reference

Css not working when label tag placed before input tag?

The switching of the order placement of the two tags (input and label) stops either the function to run or the css to load! I've tried messing around with it but to no avail. I want the boxes to appear around the yes or no options and other than that the css is working fine so its just this one section
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`; }).join('\n')+frm.innerHTML;
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
:root {
--white: #ffffff;
--light: #f0eff3;
--black: #000000;
--dark-blue: #1f2029;
--dark-light: #353746;
--red: #da2c4d;
--yellow: #f8ab37;
--grey: #ecedf3;
}
/* #Primary
================================================== */
body{
width: 100%;
background: var(--dark-blue);
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 45px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
p{
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
mark{
color: var(--white);
background-color: var(--black);
}
.section {
position: relative;
width: 100%;
display: block;
text-align: center;
margin: 0 auto;
}
.over-hide {
overflow: hidden;
}
.z-bigger {
z-index: 100 !important;
}
.background-color{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark-blue);
z-index: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:checked ~ .background-color{
background-color: var(--white);
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
position: absolute;
left: -9999px;
width: 0;
height: 0;
visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
width: 70px;
display: inline-block;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 17px 0;
margin-top: 100px;
height: 6px;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
font-family: 'unicons';
cursor: pointer;
top: -17px;
z-index: 2;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:not(:checked) + label:before {
content: '\eac1';
left: 0;
color: var(--grey);
background-color: var(--dark-light);
box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
content: '\eb8f';
left: 30px;
color: var(--yellow);
background-color: var(--dark-blue);
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked ~ .section .container .row .col-12 p{
color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 h1{
color: var(--dark-blue);
}
.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
position: relative;
display: inline-block;
padding: 0;
padding-top: 20px;
padding-bottom: 20px;
width: 260px;
font-size: 52px;
line-height: 52px;
font-weight: 700;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-text-stroke: 1px var(--white);
text-stroke: 1px var(--white);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
.checkbox-budget:not(:checked) + label{
background-color: var(--dark-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
background-color: transparent;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
position: relative;
display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
position: absolute;
content: attr(data-hover);
top: 0;
left: 0;
width: 100%;
overflow: hidden;
-webkit-text-stroke: transparent;
text-stroke: transparent;
-webkit-text-fill-color: var(--white);
text-fill-color: var(--white);
color: var(--white);
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
max-height: 0;
}
.checkbox-budget:checked + label span::before{
max-height: 100%;
}
.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
background-color: var(--light);
-webkit-text-stroke: 1px var(--dark-blue);
text-stroke: 1px var(--dark-blue);
box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}
.oval {
width: 200px;
height: 80px;
background: #39ff14;
border-radius: 40px;
font-size: 20px;
font-family: 'Poppins', sans-serif;
color: var(--white);
}
<body>
<body>
<div class="section over-hide z-bigger">
<input class="checkbox" type="checkbox" name="general" id="general">
<label class="for-checkbox" for="general"></label>
<div class="background-color"></div>
<div class="section over-hide z-bigger">
<div class="container pb-5">
<div class="row justify-content-center pb-5">
<div class="col-12 pt-1">
<h1 class="mb-4 pb-2">Lets Start</h1>
</div>
<form name="combitest">
<p> Score for test 1 (Stroke) = <span class="res"></span><br><br>
<p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
<p> Score for test 3 (some other test) = <span class="res"></span><br><br>
<input type="reset" class="oval" value="Clear Answers">
</form>
</body>
const questions=[ // questions, answers with their associated points:
{q:"History of Stroke", a:[["Yes",[10,10, 0]],["No" , [ 0, 0, 0]]]}
];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
return `<div class="col-12 pt-1">
<p class="mb-4 pb-2">${q.q}</p
</div>
<div class="col-xl-10 pb-5">
<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>\n')}</div></ul>`;
}).join('\n')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
let res=[0,0,0], uls=document.querySelectorAll('form ul');
questions.forEach((qo,i)=>{ var a;
if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
let pts=qo.a.find(([el])=>el==a.value)[1] // get array with points for all tests
res.forEach((r,i)=>res[i]+=pts[i]); // add points to res-array
}
});
res.forEach((r,i)=>spans[i].textContent=r)
};

The + symbol is the next-sibling combinator.
If you swap the order, then the label isn't the next sibling, it is the previous one.
There is no previous sibling combinator (as CSS generally never applies a rule based on something that appears later in the DOM tree (for reasons of performance and to avoid conflicts)).
You might be able to keep the elements in the same DOM order while changing the order they are rendered in by combining a Flexbox layout with the order property.

How to make form display marquee after submitting?

I'm trying to create a section in which the information submitted by user thru a form is displayed as a marquee!
I don't know what exactly should I use to make that happen?
Here are the code for the form:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: grey;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
position:relative;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
position:relative;
background-color: #fff;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
margin:0 auto;
padding: 0 10px;
float: left;
position: relative;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
#contact {
padding:10px;
margin:5px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 50px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset label {
font-size: 16px;
font-weight: 500;
}
fieldset {
border: medium none !important;
margin: 0 0 10px !important;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
position: relative;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
#contact textarea {
height:180px;
max-width:100%;
resize:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
#contact button[type="submit"] {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-style: solid;
border-color: #878787;
border-width: 1px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
#contact button[type="submit"]:hover {
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#878787;
}
:-moz-placeholder {
color:#878787;
}
::-moz-placeholder {
color:#878787;
}
:-ms-input-placeholder {
color:#878787;
}
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<marquee><span>Climate chnage is real by Wallace C.</span></marquee>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<form id="contact">
<fieldset>
<label for="name">Name</label>
<input name="name" type="text">
</fieldset>
<fieldset>
<label for="name">Email</label>
<input name="email" type="text">
</fieldset>
<fieldset>
<label for="name">Opinion</label>
<textarea name="message" rows="4" cols="50"></textarea>
</fieldset>
<fieldset>
<center><button name="submit" type="submit">Submit</button></center>
</fieldset>
</form>
</div>
</div>
I want the form information after submission to be displayed in the "marquee-info" of the "marquee-section"

You need a fresh approach. <marquee> and <center> are deprecated, you shouldn't even be using a form since you aren't submitting data anywhere and you've got tons and tons of unnecessary CSS. You are also not using the label element correctly - - the for attribute value must match the id of the element that the label is "for", not the name attribute value.
You just need a textbox and a regular button with a click event handler. Then, you'll use JavaScript to modify the left CSS property on a timer. See comments inline:
// Get references to all the DOM elements you'll work with
let output = document.querySelector(".output");
let email = document.getElementById("email");
let message = document.getElementById("message");
let timer = null; // Will reference timer
// Set up button click event handler
document.querySelector("button").addEventListener("click", move);
function move(){
clearTimeout(timer); // Prevent multiple timers
// Get current left position of output
let currentLeft = parseInt(getComputedStyle(output).left, 10);
// If output is off the screen, move it to the right.
// If not, move it 3px to the left
let outputWidth = parseInt(getComputedStyle(output).width, 10);
if(currentLeft < (0 - outputWidth)){
currentLeft = window.innerWidth;
} else {
currentLeft -= 3;
}
// Update and Move the output
output.textContent = message.value;
output.style.left = currentLeft + "px";
// Create a timer to recursively call this function
timer = setTimeout(move, 25);
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: border-box;
}
.marquee-section {
max-width:100%;
max-height: 100%;
height: 300px;
background-color: #ef6;
padding: 10px 20px;
}
.marquee-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.marquee-info {
width:100%;
max-width:600px;
margin:0 auto;
padding: 0 10px;
}
.output { position:absolute; }
.contact-section {
max-width:100%;
max-height: 100%;
height: 580px;
padding: 10px 20px;
}
.contact-heading {
font-size: 28px;
font-weight: 600;
text-align: center;
}
.contactForm {
max-width:600px;
width:100%;
padding:10px;
margin:5px 0;
}
.contactForm input[type="text"], #contact input[type="email"], .contactForm textarea, #contact button[type="submit"] { font:400 50px/16px "Raleway", Helvetica, Arial, sans-serif; }
label {
font-size: 16px;
font-weight: 500;
}
.contactForm input, .contactForm input[type="email"], .contactForm textarea {
width:100%;
max-width:700px;
border-style: solid;
border-color: #afafaf;
border-width: 1px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
height: 45px;
font-size: 0.8em;
line-height: 1.2em;
color: #111;
}
.contactForm input:hover, #contact input[type="email"]:hover, .contactForm textarea:hover {
transition:border-color 0.3s ease-in-out;
border:1px solid #4872bc;
}
.contactForm textarea {
height:180px;
max-width:100%;
resize:none;
width: 100%;
}
.contactForm button {
cursor:pointer;
margin:0 0 5px;
padding: 10px;
height: 45px;
width: 100%;
max-width: 150px;
color: #282626;
font-size: 16px;
font-weight: 600;
border-width: 1px solid #878787;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0);
}
.contactForm button:hover {
background-color: rgba(255, 255, 255, 0.3);
transition:background-color 0.3s ease-in-out;
}
.contactForm button:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.contactForm input:focus, .contactForm textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder { color:#878787; }
:-moz-placeholder { color:#878787; }
::-moz-placeholder { color:#878787; }
:-ms-input-placeholder { color:#878787; }
<div class="marquee-section">
<h1 class="marquee-heading">Opinions:</h1>
<div class="marquee-info">
<span class="output">Climate change is real by Wallace C.</span>
</div>
</div>
<div class="contact-section">
<h1 class="contact-heading">Type the info here!</h1>
<div class="contactForm">
<div class="row">
<label for="name">Name</label>
<input id="userName">
</div>
<div class="row">
<label for="email">Email</label>
<input id="email" type="email">
</div>
<div class="row">
<label for="message">Opinion</label>
<textarea id="message"></textarea>
</div>
<div class="row">
<button type="button">Submit</button>
</div>
</div>
</div>

Hide function in wizard form

I'm trying to do something with wizard form,in step 1 user can choose a radio button to hide or show content on step 2.
But I can't do it,the content on step 2 will not effect by what I choose in step1.
In order to more easy understand my question,I have do what I want in step3.conclusion what I want:user choose hide radio button in step 1, the content on step 2 will hide.
"use strict";
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('.form-wizard').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/*
Form
*/
$('.form-wizard fieldset:first').fadeIn('slow');
$('.form-wizard .required').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.form-wizard .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
// fields validation
parent_fieldset.find('.required').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
}
});
// previous step
$('.form-wizard .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
});
// submit
$('.form-wizard').on('submit', function(e) {
// fields validation
$(this).find('.required').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
// image uploader scripts
var $dropzone = $('.image_picker'),
$droptarget = $('.drop_target'),
$dropinput = $('#inputFile'),
$dropimg = $('.image_preview'),
$remover = $('[data-action="remove_current_image"]');
$dropzone.on('dragover', function() {
$droptarget.addClass('dropping');
return false;
});
$dropzone.on('dragend dragleave', function() {
$droptarget.removeClass('dropping');
return false;
});
$dropzone.on('drop', function(e) {
$droptarget.removeClass('dropping');
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
};
console.log(file);
reader.readAsDataURL(file);
return false;
});
$dropinput.change(function(e) {
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
$('.image_title input').val('');
var file = $dropinput.get(0).files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
}
reader.readAsDataURL(file);
});
$remover.on('click', function() {
$dropimg.css('background-image', '');
$droptarget.removeClass('dropped');
$remover.addClass('disabled');
$('.image_title input').val('');
});
$('.image_title input').blur(function() {
if ($(this).val() != '') {
$droptarget.removeClass('dropped');
}
});
// image uploader scripts
.form-box {
padding-top: 40px;
padding-bottom: 40px;
background: rgb(234,88,4); /* Old browsers */
background: -moz-linear-gradient(top, rgba(234,88,4,1) 0%, rgba(234,40,3,1) 51%, rgba(234,88,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5804', endColorstr='#ea5804',GradientType=0 ); /* IE6-9 */
}
.form-wizard {
padding: 25px;
background: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
box-shadow: 0px 0px 6px 3px #777;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;
}
.form-wizard strong { font-weight: 500; }
.form-wizard a, .form-wizard a:hover, .form-wizard a:focus {
color: #ea2803;
text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard h1, .form-wizard h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
.form-wizard h3 {
font-size: 25px;
font-weight: 300;
color: #ea2803;
line-height: 30px;
margin-top: 0;
margin-bottom: 5px;
text-transform: uppercase;
}
.form-wizard h4 {
float:left;
font-size: 20px;
font-weight: 300;
color: #ea2803;
line-height: 26px;
width:100%;
}
.form-wizard h4 span{
float:right;
font-size: 18px;
font-weight: 300;
color: #555;
line-height: 26px;
}
.form-wizard table tr th{font-weight:normal;}
.form-wizard img { max-width: 100%; }
.form-wizard ::-moz-selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-wizard ::selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-control {
height: 44px;
width:100%;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #fff;
border: 1px solid #ddd;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 44px;
color: #888;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
position: absolute;
margin-top: 9px;
margin-left: -20px;
}
.form-control option:hover, .form-control option:checked {
box-shadow: 0 0 10px 100px #ea2803 inset;
}
.form-control:focus {
outline: 0;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.form-control:-moz-placeholder { color: #888; }
.form-control:-ms-input-placeholder { color: #888; }
.form-control::-webkit-input-placeholder { color: #888; }
.form-wizard label { font-weight: 300; }
.form-wizard label span { color:#ea2803; }
.form-wizard .btn {
min-width: 105px;
height: 40px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
border: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 40px;
color: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
text-shadow: none;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard .btn:hover {
background:#f34727;
color: #fff;
}
.form-wizard .btn:active {
outline: 0;
background:#f34727;
color: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-wizard .btn:focus,
.form-wizard .btn:active:focus,
.form-wizard .btn.active:focus {
outline: 0;
background:#f34727;
color: #fff;
}
.form-wizard .btn.btn-next,
.form-wizard .btn.btn-next:focus,
.form-wizard .btn.btn-next:active:focus,
.form-wizard .btn.btn-next.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-submit,
.form-wizard .btn.btn-submit:focus,
.form-wizard .btn.btn-submit:active:focus,
.form-wizard .btn.btn-submit.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-previous,
.form-wizard .btn.btn-previous:focus,
.form-wizard .btn.btn-previous:active:focus,
.form-wizard .btn.btn-previous.active:focus {
background: #bbb;
}
.form-wizard .success h3{
color: #4F8A10;
text-align: center;
margin: 20px auto !important;
}
.form-wizard .success .success-icon {
color: #4F8A10;
font-size: 100px;
border: 5px solid #4F8A10;
border-radius: 100px;
text-align: center !important;
width: 110px;
margin: 25px auto;
}
.form-wizard .progress-bar {
background-color: #ea2803;
}
.form-wizard-steps{
margin:auto;
overflow: hidden;
position: relative;
margin-top: 20px;
}
.form-wizard-step{
padding-top:10px !important;
border:2px solid #fff;
background:#ccc;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.form-wizard-step.active{
background:#ea2803;
}
.form-wizard-step.activated{
background:#ea2803;
}
.form-wizard-progress {
position: absolute;
top: 36px;
left: 0;
width: 100%;
height: 0px;
background: #ea2803;
}
.form-wizard-progress-line {
position: absolute;
top: 0;
left: 0;
height: 0px;
background: #ea2803;
}
.form-wizard-tolal-steps-3 .form-wizard-step {
position: relative;
float: left;
width: 33.33%;
padding: 0 5px;
}
.form-wizard-tolal-steps-4 .form-wizard-step {
position: relative;
float: left;
width: 25%;
padding: 0 5px;
}
.form-wizard-tolal-steps-5 .form-wizard-step {
position: relative;
float: left;
width: 20%;
padding: 0 5px;
}
.form-wizard-step-icon {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 4px;
background: #ddd;
font-size: 16px;
color: #777;
line-height: 40px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated .form-wizard-step-icon {
background: #ea2803;
border: 1px solid #fff;
color: #fff;
line-height: 38px;
}
.form-wizard-step.active .form-wizard-step-icon {
background: #fff;
border: 1px solid #fff;
color: #ea2803;
line-height: 38px;
}
.form-wizard-step p {
color: #fff;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated p { color: #fff; }
.form-wizard-step.active p { color: #fff; }
.form-wizard fieldset {
display: none;
text-align: left;
border:0px !important
}
.form-wizard-buttons { text-align: right; }
.form-wizard .input-error { border-color: #ea2803;}
/** image uploader **/
.image-upload a[data-action] {
cursor: pointer;
color: #555;
font-size: 18px;
line-height: 24px;
transition: color 0.2s;
}
.image-upload a[data-action] i {
width: 1.25em;
text-align: center;
}
.image-upload a[data-action]:hover {
color: #ea2803;
}
.image-upload a[data-action].disabled {
opacity: 0.35;
cursor: default;
}
.image-upload a[data-action].disabled:hover {
color: #555;
}
.settings_wrap{
margin-top:20px;
}
.image_picker .settings_wrap {
overflow: hidden;
position: relative;
}
.image_picker .settings_wrap .drop_target,
.image_picker .settings_wrap .settings_actions {
float: left;
}
.image_picker .settings_wrap .drop_target {
margin-right: 18px;
}
.image_picker .settings_wrap .settings_actions {
float: left;
margin-top: 100px;
margin-left: 20px;
}
.settings_actions.vertical a {
display: block;
}
.drop_target {
position: relative;
cursor: pointer;
transition: all 0.2s;
width: 250px;
height: 250px;
background: #f2f2f2;
border-radius: 100%;
margin: 0 auto 25px auto;
overflow: hidden;
border: 8px solid #E0E0E0;
}
.drop_target input[type="file"] {
visibility: hidden;
}
.drop_target::before {
content: 'Drop Hear';
font-family: FontAwesome;
position: absolute;
display: block;
width: 100%;
line-height: 220px;
text-align: center;
font-size: 40px;
color: rgba(0, 0, 0, 0.3);
transition: color 0.2s;
}
.drop_target:hover,
.drop_target.dropping {
background: #f80;
border-top-color: #cc6d00;
}
.drop_target:hover:before,
.drop_target.dropping:before {
color: rgba(0, 0, 0, 0.6);
}
.drop_target .image_preview {
width: 100%;
height: 100%;
background: no-repeat center;
background-size: contain;
position: relative;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<body>
<style>
#cuss:not(:checked) ~ #con {
display: none;
}
#buss:not(:checked) ~ #bon {
display: none;
}
</style>
<section class="form-box" >
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-wizard">
<!-- Form Wizard -->
<form role="form" action="" method="post">
<!-- Form progress -->
<div class="form-wizard-steps form-wizard-tolal-steps-3">
<div class="form-wizard-progress">
<div class="form-wizard-progress-line" data-now-value="12.25" data-number-of-steps="4" style="width: 12.25%;"></div>
</div>
<!-- Step 1 -->
<div class="form-wizard-step active">
<div class="form-wizard-step-icon"><i class="fa fa-user" aria-hidden="true"></i></div>
<p>Step 1</p>
</div>
<!-- Step 1 -->
<!-- Step 2 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
<p>Step 2</p>
</div>
<!-- Step 2 -->
<!-- Step 3 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>
<p>Step 3</p>
</div>
<!-- Step 3 -->
</div>
<!-- Form progress -->
<!-- Form Step 1 -->
<fieldset>
<label >Click to hide or show content on step2</label>
<input style="margin-left:20px;" type="radio" id="cuss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 1 -->
<!-- Form Step 2 -->
<fieldset>
<div id="con" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 2 -->
<!-- Form Step 3 -->
<fieldset>
<label >Click to hide or show</label>
<input style="margin-left:20px;" type="radio" id="buss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div id="bon" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
<!-- Form Step 3->
</form>
<!-- Form Wizard -->
</div>
</div>
</div>
</section>
</body>
</html>

You can simply add an event when clicking the show or hide option.
I added a new section to your JavaScript ("Content Toggle"), and added 2 classes for the elements which you can click.
Now when clicking one of each radio buttons, content on step 2 will be either shown or hidden.
If you want to toggle step2 with clicking radio buttons on step3, you can simply add the classes ("js-show-con" and "js-hide-con") to the input fields there.
"use strict";
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if($(window).scrollTop() != scroll_to) {
$('.form-wizard').stop().animate({scrollTop: scroll_to}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if(direction == 'right') {
new_value = now_value + ( 100 / number_of_steps );
}
else if(direction == 'left') {
new_value = now_value - ( 100 / number_of_steps );
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/**
* Content Toggle
*/
var conElement = $('#con');
var showElement = $('.js-show-con');
var hideElement = $('.js-hide-con');
showElement.click(
function() {
conElement.show()
}
);
hideElement.click(
function() {
conElement.hide()
}
);
/*
Form
*/
$('.form-wizard fieldset:first').fadeIn('slow');
$('.form-wizard .required').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.form-wizard .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
// fields validation
parent_fieldset.find('.required').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
}
});
// previous step
$('.form-wizard .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class( $('.form-wizard'), 20 );
});
});
// submit
$('.form-wizard').on('submit', function(e) {
// fields validation
$(this).find('.required').each(function() {
if( $(this).val() == "" ) {
e.preventDefault();
$(this).addClass('input-error');
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
// image uploader scripts
var $dropzone = $('.image_picker'),
$droptarget = $('.drop_target'),
$dropinput = $('#inputFile'),
$dropimg = $('.image_preview'),
$remover = $('[data-action="remove_current_image"]');
$dropzone.on('dragover', function() {
$droptarget.addClass('dropping');
return false;
});
$dropzone.on('dragend dragleave', function() {
$droptarget.removeClass('dropping');
return false;
});
$dropzone.on('drop', function(e) {
$droptarget.removeClass('dropping');
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
};
console.log(file);
reader.readAsDataURL(file);
return false;
});
$dropinput.change(function(e) {
$droptarget.addClass('dropped');
$remover.removeClass('disabled');
$('.image_title input').val('');
var file = $dropinput.get(0).files[0],
reader = new FileReader();
reader.onload = function(event) {
$dropimg.css('background-image', 'url(' + event.target.result + ')');
}
reader.readAsDataURL(file);
});
$remover.on('click', function() {
$dropimg.css('background-image', '');
$droptarget.removeClass('dropped');
$remover.addClass('disabled');
$('.image_title input').val('');
});
$('.image_title input').blur(function() {
if ($(this).val() != '') {
$droptarget.removeClass('dropped');
}
});
// image uploader scripts
.form-box {
padding-top: 40px;
padding-bottom: 40px;
background: rgb(234,88,4); /* Old browsers */
background: -moz-linear-gradient(top, rgba(234,88,4,1) 0%, rgba(234,40,3,1) 51%, rgba(234,88,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(234,88,4,1) 0%,rgba(234,40,3,1) 51%,rgba(234,88,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5804', endColorstr='#ea5804',GradientType=0 ); /* IE6-9 */
}
.form-wizard {
padding: 25px;
background: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
box-shadow: 0px 0px 6px 3px #777;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
line-height: 30px;
text-align: center;
}
.form-wizard strong { font-weight: 500; }
.form-wizard a, .form-wizard a:hover, .form-wizard a:focus {
color: #ea2803;
text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard h1, .form-wizard h2 {
margin-top: 10px;
font-size: 38px;
font-weight: 100;
color: #555;
line-height: 50px;
}
.form-wizard h3 {
font-size: 25px;
font-weight: 300;
color: #ea2803;
line-height: 30px;
margin-top: 0;
margin-bottom: 5px;
text-transform: uppercase;
}
.form-wizard h4 {
float:left;
font-size: 20px;
font-weight: 300;
color: #ea2803;
line-height: 26px;
width:100%;
}
.form-wizard h4 span{
float:right;
font-size: 18px;
font-weight: 300;
color: #555;
line-height: 26px;
}
.form-wizard table tr th{font-weight:normal;}
.form-wizard img { max-width: 100%; }
.form-wizard ::-moz-selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-wizard ::selection { background: #ea2803; color: #fff; text-shadow: none; }
.form-control {
height: 44px;
width:100%;
margin: 0;
padding: 0 20px;
vertical-align: middle;
background: #fff;
border: 1px solid #ddd;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 44px;
color: #888;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
position: absolute;
margin-top: 9px;
margin-left: -20px;
}
.form-control option:hover, .form-control option:checked {
box-shadow: 0 0 10px 100px #ea2803 inset;
}
.form-control:focus {
outline: 0;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.form-control:-moz-placeholder { color: #888; }
.form-control:-ms-input-placeholder { color: #888; }
.form-control::-webkit-input-placeholder { color: #888; }
.form-wizard label { font-weight: 300; }
.form-wizard label span { color:#ea2803; }
.form-wizard .btn {
min-width: 105px;
height: 40px;
margin: 0;
padding: 0 20px;
vertical-align: middle;
border: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 40px;
color: #fff;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
text-shadow: none;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
.form-wizard .btn:hover {
background:#f34727;
color: #fff;
}
.form-wizard .btn:active {
outline: 0;
background:#f34727;
color: #fff;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-wizard .btn:focus,
.form-wizard .btn:active:focus,
.form-wizard .btn.active:focus {
outline: 0;
background:#f34727;
color: #fff;
}
.form-wizard .btn.btn-next,
.form-wizard .btn.btn-next:focus,
.form-wizard .btn.btn-next:active:focus,
.form-wizard .btn.btn-next.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-submit,
.form-wizard .btn.btn-submit:focus,
.form-wizard .btn.btn-submit:active:focus,
.form-wizard .btn.btn-submit.active:focus {
background: #ea2803;
}
.form-wizard .btn.btn-previous,
.form-wizard .btn.btn-previous:focus,
.form-wizard .btn.btn-previous:active:focus,
.form-wizard .btn.btn-previous.active:focus {
background: #bbb;
}
.form-wizard .success h3{
color: #4F8A10;
text-align: center;
margin: 20px auto !important;
}
.form-wizard .success .success-icon {
color: #4F8A10;
font-size: 100px;
border: 5px solid #4F8A10;
border-radius: 100px;
text-align: center !important;
width: 110px;
margin: 25px auto;
}
.form-wizard .progress-bar {
background-color: #ea2803;
}
.form-wizard-steps{
margin:auto;
overflow: hidden;
position: relative;
margin-top: 20px;
}
.form-wizard-step{
padding-top:10px !important;
border:2px solid #fff;
background:#ccc;
-ms-transform: skewX(-30deg); /* IE 9 */
-webkit-transform: skewX(-30deg); /* Safari */
transform: skewX(-30deg); /* Standard syntax */
}
.form-wizard-step.active{
background:#ea2803;
}
.form-wizard-step.activated{
background:#ea2803;
}
.form-wizard-progress {
position: absolute;
top: 36px;
left: 0;
width: 100%;
height: 0px;
background: #ea2803;
}
.form-wizard-progress-line {
position: absolute;
top: 0;
left: 0;
height: 0px;
background: #ea2803;
}
.form-wizard-tolal-steps-3 .form-wizard-step {
position: relative;
float: left;
width: 33.33%;
padding: 0 5px;
}
.form-wizard-tolal-steps-4 .form-wizard-step {
position: relative;
float: left;
width: 25%;
padding: 0 5px;
}
.form-wizard-tolal-steps-5 .form-wizard-step {
position: relative;
float: left;
width: 20%;
padding: 0 5px;
}
.form-wizard-step-icon {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 4px;
background: #ddd;
font-size: 16px;
color: #777;
line-height: 40px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated .form-wizard-step-icon {
background: #ea2803;
border: 1px solid #fff;
color: #fff;
line-height: 38px;
}
.form-wizard-step.active .form-wizard-step-icon {
background: #fff;
border: 1px solid #fff;
color: #ea2803;
line-height: 38px;
}
.form-wizard-step p {
color: #fff;
-ms-transform: skewX(30deg); /* IE 9 */
-webkit-transform: skewX(30deg); /* Safari */
transform: skewX(30deg); /* Standard syntax */
}
.form-wizard-step.activated p { color: #fff; }
.form-wizard-step.active p { color: #fff; }
.form-wizard fieldset {
display: none;
text-align: left;
border:0px !important
}
.form-wizard-buttons { text-align: right; }
.form-wizard .input-error { border-color: #ea2803;}
/** image uploader **/
.image-upload a[data-action] {
cursor: pointer;
color: #555;
font-size: 18px;
line-height: 24px;
transition: color 0.2s;
}
.image-upload a[data-action] i {
width: 1.25em;
text-align: center;
}
.image-upload a[data-action]:hover {
color: #ea2803;
}
.image-upload a[data-action].disabled {
opacity: 0.35;
cursor: default;
}
.image-upload a[data-action].disabled:hover {
color: #555;
}
.settings_wrap{
margin-top:20px;
}
.image_picker .settings_wrap {
overflow: hidden;
position: relative;
}
.image_picker .settings_wrap .drop_target,
.image_picker .settings_wrap .settings_actions {
float: left;
}
.image_picker .settings_wrap .drop_target {
margin-right: 18px;
}
.image_picker .settings_wrap .settings_actions {
float: left;
margin-top: 100px;
margin-left: 20px;
}
.settings_actions.vertical a {
display: block;
}
.drop_target {
position: relative;
cursor: pointer;
transition: all 0.2s;
width: 250px;
height: 250px;
background: #f2f2f2;
border-radius: 100%;
margin: 0 auto 25px auto;
overflow: hidden;
border: 8px solid #E0E0E0;
}
.drop_target input[type="file"] {
visibility: hidden;
}
.drop_target::before {
content: 'Drop Hear';
font-family: FontAwesome;
position: absolute;
display: block;
width: 100%;
line-height: 220px;
text-align: center;
font-size: 40px;
color: rgba(0, 0, 0, 0.3);
transition: color 0.2s;
}
.drop_target:hover,
.drop_target.dropping {
background: #f80;
border-top-color: #cc6d00;
}
.drop_target:hover:before,
.drop_target.dropping:before {
color: rgba(0, 0, 0, 0.6);
}
.drop_target .image_preview {
width: 100%;
height: 100%;
background: no-repeat center;
background-size: contain;
position: relative;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<body>
<style>
#cuss:not(:checked) ~ #con {
display: none;
}
#buss:not(:checked) ~ #bon {
display: none;
}
</style>
<section class="form-box" >
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-wizard">
<!-- Form Wizard -->
<form role="form" action="" method="post">
<!-- Form progress -->
<div class="form-wizard-steps form-wizard-tolal-steps-3">
<div class="form-wizard-progress">
<div class="form-wizard-progress-line" data-now-value="12.25" data-number-of-steps="4" style="width: 12.25%;"></div>
</div>
<!-- Step 1 -->
<div class="form-wizard-step active">
<div class="form-wizard-step-icon"><i class="fa fa-user" aria-hidden="true"></i></div>
<p>Step 1</p>
</div>
<!-- Step 1 -->
<!-- Step 2 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-briefcase" aria-hidden="true"></i></div>
<p>Step 2</p>
</div>
<!-- Step 2 -->
<!-- Step 3 -->
<div class="form-wizard-step">
<div class="form-wizard-step-icon"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>
<p>Step 3</p>
</div>
<!-- Step 3 -->
</div>
<!-- Form progress -->
<!-- Form Step 1 -->
<fieldset>
<label >Click to hide or show content on step2</label>
<input class="js-show-con" style="margin-left:20px;" type="radio" id="cuss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input class="js-hide-con" type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 1 -->
<!-- Form Step 2 -->
<fieldset>
<div id="con" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<!-- Form Step 2 -->
<!-- Form Step 3 -->
<fieldset>
<label >Click to hide or show</label>
<input style="margin-left:20px;" type="radio" id="buss" name="sh" value="con" />
<label style="padding-right:10px;">Show</label>
<input type="radio" id="hid" name="sh" value="hid" />
<label>Hide</label>
<div id="bon" class="form-group">
<p>Content to show or hide depend on the checkbox</p>
</div>
<div class="form-wizard-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
<!-- Form Step 3->
</form>
<!-- Form Wizard -->
</div>
</div>
</div>
</section>
</body>
</html>

drop down item to label

I have code below for a contact form I am creating. Is it possible to have whatever item the user selects in each drop down list to appear on the labels next to Location and Category on both the main page and the preview page? Anything helps, cheers.
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
document.getElementById('file-upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').innerText = filename;
var labelFile = this.value;
var lastIndex = labelFile.lastIndexOf("\\");
if (lastIndex >= 0) {
labelFile = labelFile.substring(lastIndex + 1);
}
document.getElementById('labelFile').innerText = labelFile;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:525px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
color:#4CAF50;
font-family:Verdana;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
color:#4CAF50;
font-family:Verdana;
font-size: 15px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:150px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 525px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #F9F9F9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #bababa;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
font-size:15px;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
text-align:left;
max-height: 115px;
overflow: auto;
}
#labelName{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelAttach{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
padding-top:12px;
color:#4CAF50;
}
#labelFile{
float:left;
font-family:Verdana;
padding-top:16px;
font-size:10px;
padding-left:7px;
}
#filename{
font-family:Verdana;
font-size:10px;
padding-top:16px;
}
#labelLocation{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelLocation1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn" id="my-location">Location</button>
<div class="dropdown-content">
Gibraltar House
WLSC
CMF
Motorized
Telepharmacy
Anchorage-PAW
ADC
NSQM
Bellevue-PAW
PNW
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="my-category">Category</button>
<div class="dropdown-content">
401K
Accidental Death & Dismemberment
Banking Info Change
Bereavement
Building Access
Canada Savings Bonds
Compensation
Customer Incident
Direct Deposit
Effectiveness Assessment Process
Employee and Family Assistance Program
Employee Discount
Employee History
Employee Ownership Plan
Employee Referral Program
Employee Survey
Employment Eligibility Verification
Expenses
Group Health & Dental
Group RRSP
Health & Safety
Health Savings Account
Holiday Calendar
Holidays/Leaves
Life Insurance
Medical Dental & Vision
New Hire Orientation
Other
Payroll
Pension
Personal Info change
Policy
Position Change
Record of Employment
Recruitment
Resignation/Termination
Shipment of Personal Belongings
Short Term Disability
Short Term Incentives Program (STIP)
Sick Leave
Tax Form
Temporary Disability Insurance
Time and Attendance
Training
Tuition Assistance Program (TAP)
Vacation
Work Schedule
Workers Compensation
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<p id="filename" style="display: inline-block"></p>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<label id="labelAttach">Attachment:</label>
<label id="labelFile"></label>
<button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>

I've added the ID category-dropdown and location-dropdown to the divs that contain the list elements.
addDropdownEventListeners loops through all of the list elements and adds a click event listener to each. When a user clicks a list element, it will add the innerHTML corresponding label.
var categoryItems = document.querySelectorAll("#category-dropdown > a"),
locationItems = document.querySelectorAll("#location-dropdown > a");
addDropdownEventListeners(categoryItems, 'Category');
addDropdownEventListeners(locationItems, 'Location');
function addDropdownEventListeners(items, labelName) {
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", function(e) {
document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML;
document.getElementById("label" + labelName).innerHTML = e.target.innerHTML;
});
}
}
Implemented into your code
var categoryItems = document.querySelectorAll("#category-dropdown > a"),
locationItems = document.querySelectorAll("#location-dropdown > a");
addDropdownEventListeners(categoryItems, 'Category');
addDropdownEventListeners(locationItems, 'Location');
function addDropdownEventListeners(items, labelName) {
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", function(e) {
document.getElementById("label" + labelName + "1").innerHTML = e.target.innerHTML;
document.getElementById("label" + labelName).innerHTML = e.target.innerHTML;
});
}
}
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
document.getElementById('file-upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').innerText = filename;
var labelFile = this.value;
var lastIndex = labelFile.lastIndexOf("\\");
if (lastIndex >= 0) {
labelFile = labelFile.substring(lastIndex + 1);
}
document.getElementById('labelFile').innerText = labelFile;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:525px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
color:#4CAF50;
font-family:Verdana;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
color:#4CAF50;
font-family:Verdana;
font-size: 15px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:150px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 525px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #F9F9F9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #bababa;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
font-size:15px;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
text-align:left;
max-height: 115px;
overflow: auto;
}
#labelName{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelAttach{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
padding-top:12px;
color:#4CAF50;
}
#labelFile{
float:left;
font-family:Verdana;
padding-top:16px;
font-size:10px;
padding-left:7px;
}
#filename{
font-family:Verdana;
font-size:10px;
padding-top:16px;
}
#labelLocation{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelLocation1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn" id="my-location">Location</button>
<div class="dropdown-content" id="location-dropdown">
Gibraltar House
WLSC
CMF
Motorized
Telepharmacy
Anchorage-PAW
ADC
NSQM
Bellevue-PAW
PNW
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="my-category">Category</button>
<div class="dropdown-content" id="category-dropdown">
401K
Accidental Death & Dismemberment
Banking Info Change
Bereavement
Building Access
Canada Savings Bonds
Compensation
Customer Incident
Direct Deposit
Effectiveness Assessment Process
Employee and Family Assistance Program
Employee Discount
Employee History
Employee Ownership Plan
Employee Referral Program
Employee Survey
Employment Eligibility Verification
Expenses
Group Health & Dental
Group RRSP
Health & Safety
Health Savings Account
Holiday Calendar
Holidays/Leaves
Life Insurance
Medical Dental & Vision
New Hire Orientation
Other
Payroll
Pension
Personal Info change
Policy
Position Change
Record of Employment
Recruitment
Resignation/Termination
Shipment of Personal Belongings
Short Term Disability
Short Term Incentives Program (STIP)
Sick Leave
Tax Form
Temporary Disability Insurance
Time and Attendance
Training
Tuition Assistance Program (TAP)
Vacation
Work Schedule
Workers Compensation
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<p id="filename" style="display: inline-block"></p>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<label id="labelAttach">Attachment:</label>
<label id="labelFile"></label>
<button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>

Try this. I have done with jquery. If you don't want to use jquery please tell and I will try without it.
$(function(){
$('#abc a').click(function(){
var location=$(this).text();
$('#labelLocation1').text(location);
});
});
$(function(){
$('#xyz a').click(function(){
var category=$(this).text();
$('#labelCategory1').text(category);
});
});
function openNav() {
document.getElementById("myNav").classList.remove("collapsed");
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
var input = document.getElementById("txtName");
var value = input.value;
var label = document.getElementById("labelName");
label.innerHTML = value;
var input = document.getElementById("txtNumber");
var value = input.value;
var label = document.getElementById("labelNumber");
label.innerHTML = value;
var input = document.getElementById("txtEmail");
var value = input.value;
var label = document.getElementById("labelEmail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("myNav").classList.add("collapsed");
}
document.getElementById('file-upload').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
document.getElementById('filename').innerText = filename;
var labelFile = this.value;
var lastIndex = labelFile.lastIndexOf("\\");
if (lastIndex >= 0) {
labelFile = labelFile.substring(lastIndex + 1);
}
document.getElementById('labelFile').innerText = labelFile;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px "Verdana", Verdana;
}
#contact {
background: #F9F9F9;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
height:525px;
}
#contact h3 {
display: block;
font-family:Verdana;
font-size: 24px;
font-weight: 300;
margin-bottom: 10px;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-family:Verdana;
font-size: 13px;
font-weight: 400;
}
#contact h5 {
text-decoration:underline;
display: block;
color:#4CAF50;
font-family:Verdana;
font-size: 19px;
font-weight: normal;
margin-bottom: 10px;
}
#contact h6 {
text-decoration:underline;
display: block;
text-align:left;
color:#4CAF50;
font-family:Verdana;
font-size: 15px;
font-weight: normal;
margin-bottom: 10px;
}
.fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#button{
float:right;
cursor: pointer;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#button:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 13px;
font-size: 16px;
width:125px;
height:45px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:150px;/* you can change as you need it */
overflow:auto;/* to get scroll */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
input[type="file"]{
display: none;
}
.custom-file-upload {
cursor: pointer;
padding: 13px 16px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.custom-file-upload:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.custom-file-upload:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay {
height: 525px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #F9F9F9;
overflow-x: hidden;
transition: 0.5s;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
.overlay.collapsed {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
}
.overlay-content {
position: relative;
/*top: 5%;*/
width: 100%;
height: 100%;
text-align: center;
/*margin-top: 25px;*/
}
.overlay-content .container {
height: 100%;
}
.overlay-content fieldset:last-child {
position: absolute;
bottom: 0;
margin-bottom: 0;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
z-index: 100;
}
.overlay a:hover, .overlay a:focus {
color: #bababa;
}
.overlay .closebtn {
position: absolute;
top: 15px;
right: 15px;
font-size: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#contact-submit{
float:right;
cursor: pointer;
font-size:15px;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
}
#contact-submit:hover{
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#label{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
text-align:left;
max-height: 115px;
overflow: auto;
}
#labelName{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelNumber{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelEmail{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelAttach{
float:left;
text-decoration:underline;
font-family:Verdana;
font-size:13px;
padding-top:12px;
color:#4CAF50;
}
#labelFile{
float:left;
font-family:Verdana;
padding-top:16px;
font-size:10px;
padding-left:7px;
}
#filename{
font-family:Verdana;
font-size:10px;
padding-top:16px;
}
#labelLocation{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelLocation1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelCategory1{
padding-left:15px;
float:left;
font-family:Verdana;
font-size:13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form id="contact">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn" id="my-location">Location</button>
<div class="dropdown-content" id="abc">
Gibraltar House
WLSC
CMF
Motorized
Telepharmacy
Anchorage-PAW
ADC
NSQM
Bellevue-PAW
PNW
</div>
</div>
<div class="dropdown">
<button class="dropbtn" id="my-category">Category</button>
<div class="dropdown-content" id="xyz">
401K
Accidental Death & Dismemberment
Banking Info Change
Bereavement
Building Access
Canada Savings Bonds
Compensation
Customer Incident
Direct Deposit
Effectiveness Assessment Process
Employee and Family Assistance Program
Employee Discount
Employee History
Employee Ownership Plan
Employee Referral Program
Employee Survey
Employment Eligibility Verification
Expenses
Group Health & Dental
Group RRSP
Health & Safety
Health Savings Account
Holiday Calendar
Holidays/Leaves
Life Insurance
Medical Dental & Vision
New Hire Orientation
Other
Payroll
Pension
Personal Info change
Policy
Position Change
Record of Employment
Recruitment
Resignation/Termination
Shipment of Personal Belongings
Short Term Disability
Short Term Incentives Program (STIP)
Sick Leave
Tax Form
Temporary Disability Insurance
Time and Attendance
Training
Tuition Assistance Program (TAP)
Vacation
Work Schedule
Workers Compensation
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory1">Show choice here</label>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail..." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input id="txtName" placeholder="Name" type="text" tabindex="4" >
<input id="txtNumber" placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input id="txtEmail" placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<fieldset class="fieldset">
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Attachment
</label>
<input id="file-upload" type="file"/>
<p id="filename" style="display: inline-block"></p>
<div id="myNav" class="overlay collapsed">
×
<div class="overlay-content">
<div class="container">
<h5>Summary</h5>
<fieldset class="fieldset">
<label id="label">Location:</label>
<label id="labelLocation">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Category:</label>
<label id="labelCategory">Show here</label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
</fieldset>
<h6>Contact Information</h6>
<fieldset class="fieldset">
<label id="label">Name:</label>
<label id="labelName"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Contact Number:</label>
<label id="labelNumber"></label>
</fieldset>
<fieldset class="fieldset">
<label id="label">Preferred Email:</label>
<label id="labelEmail"></label>
</fieldset>
<fieldset class="fieldset">
<label id="labelAttach">Attachment:</label>
<label id="labelFile"></label>
<button name="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</div>
</div>
</div>
<span id="button" onclick="openNav()">Preview</span>
</fieldset>
</form>
</div>

Cannot get two contact forms centerd next to each other

I've been looking at CSS tutorials for hours trying different ways to get them inline, but I can't seem to do it.
I'm currently learning the best techniques for UI/UX and I'm using Copdepen for inspiration.
I'm trying to get these two forms inline with each other.
Any help would be great.
I made a fiddle which renders the contact form properly not the other component which is a map.
Here's the Codepen of the correct working map UI.
You can also use the following snippet:
var myCenter = new google.maps.LatLng(51.308742, -0.320850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
body {
margin: 0;
background: #78909C
}
.map {
width: 700px;
height: 380px;
margin: calc(50vh - 190px) auto;
box-shadow: 0 0 40px -10px black;
background: rgb(240, 240, 240);
font-family: 'Montserrat', sans-serif;
max-width: calc(100vw - 60px)
}
#map {
width: 65%;
height: 380px;
display: inline-block
}
.map-c {
float: right;
width: 35%;
height: 100%;
padding: 25px;
box-sizing: border-box
}
h1 {
margin: 0;
font-weight: normal;
color: rgb(60, 60, 70);
font-size: 28px
}
p {
font-size: 13px;
margin-top: 20px;
margin-bottom: 30px
}
.det {
font-size: 12px;
margin-bottom: 15px
}
i {
float: left;
font-size: 18px !important;
margin: 0 8px 0 0
}
button {
margin: 15px 4px;
padding: 13px 9px;
display: inline-block;
cursor: pointer;
background: none;
color: #546973;
border: 2px solid #78909C;
transition: all 0.3s;
border-radius: 8px;
outline: 0
}
button:hover {
border-color: rgb(90, 90, 90);
color: rgb(90, 90, 90)
}
button:after {
content: 'Directions';
font-family: 'Montserrat', sans-serif;
display: block;
font-size: 11px;
margin-top: 8px
}
.fa-envelope:after {
content: 'Email';
margin: 8px 13px 0
}
#media only screen and (max-width: 720px) {
.map {
height: 450px;
margin: calc(50vh - 225px) auto;
overflow: hidden
}
#map {
width: 100%;
height: 200px;
}
.map-c {
float: right;
width: 100%;
}
button {
float: right;
margin-top: -75px
}
}
#media only screen and (max-width: 460px) {
p {
display: none
}
h1 {
margin-bottom: 20px
}
button {
float: none;
margin-top: 10px
}
.det {
margin-bottom: 9px
}
}
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 12px;
line-height: 30px;
color: #777;
background: #FFFF;
}
.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
font: 400 12px/16px"Open Sans", Helvetica, Arial, sans-serif;
}
#contact {
background: #F9F9F9;
padding: 25px;
margin: 50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin: 5px 0 15px;
display: block;
font-size: 13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
width: 100%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #AAA;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #0CF;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #09C;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #999;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
<div class="map">
<div id="map"></div>
<div class="map-c">
<h1>ABC Stores</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium id cumque est dolores voluptatibus.</p>
<div class="det"><i class="fa fa-map-marker"></i> 102 New Road, New City</div>
<div class="det"><i class="fa fa-phone"></i> 001 2045 509</div>
<div class="det"><i class="fa fa-globe"></i> www.abcstores.com</div>
<center>
<button class="fa fa-car"></button>
<button class="fa fa-envelope"></button>
</center>
</div>
</div>

You can use an html table:
<table>
<tr>
<td>
<form>
...
</form>
</td>
<td>
<form>
...
</form>
</td>
</tr>
</table>
this is my preffered method for getting elements inline. I don't know if you wanted a CSS answer, but this will work.