Develop Reference

Open link in background tab without losing focus

I made a modal popup that reveals coupon code on my website, and the button is linked to the offer page. I want the offer page to open in background tab without losing focus on my page. is there any way to do it? here is the working link for my modal popup on button reveal coupon code and buy, thank you.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="location.href='#popup1'">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>

Try window.open('link', 'name');
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
function openView() {
location.href='#popup1';
window.open('https://stackoverflow.com/questions/60432716/', 'name');
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="openView()">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>

Chatbox wrapper blocks click on button

I have a chatbox that shows and hides on click of the button.
As example I have some pages with some buttons that are behind the chatbox.
In this example the button is not clickable.
How do I fix this?
The chatbox isn't even open and still the button is not clickable.
I want the button to be clickable when my chat is closed.
I tried to do this:
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
z-index: -99; //////// doesn't work
}
How is it even in front of my button?
Here you got my chat example with an example button.
const btn = document.querySelector(".js-chat");
const chatBox = document.querySelector(".js-chatbox");
$("#chat-circle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
$(".chat-box-toggle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
btn.addEventListener("click", () => {
chatBox.classList.toggle("chatbox--is-visible");
if (chatBox.classList.contains("chatbox--is-visible")) {
btn.innerHTML = '<i class="fa fa-times"></i>';
} else {
btn.innerHTML = '<i class="fa fa-comments"></i>';
}
});
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
}
button{
float: right;
margin-top: 70px;
margin-right: 20px;
}
.btn--chat {
align-self: flex-end;
background: #46A7B3;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
color: #fff !important;
display: block;
font-size: 1.8em;
margin-top: 0.5em;
transition: all 300ms ease;
text-align: center;
height: 60px;
width: 60px;
border-radius: 50%;
}
.btn--chat:hover {
background: #37848e;
}
.chatbox {
border-radius: 0.5em;
opacity: 0;
order: -1;
transition: all 300ms ease;
transform-origin: 100% 100%;
transform: scale(0);
visibility: hidden;
width: 300px;
box-shadow: -2px 2px 15px 4px #222d32;
}
.chatbox__input {
border-radius: 0.5em;
border: 0;
color: #555;
font-size: 0.9rem;
padding: 2em 1em;
position: relative;
resize: none;
}
.chatbox__input:required {
box-shadow: none;
}
.chatbox__submit {
background: none;
border: 0;
bottom: 0.75em;
cursor: pointer;
color: #3e54a4;
font-size: 0.85rem;
position: absolute;
right: 0.5em;
}
.chatbox--is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
}
.chat-box-header {
background: #46A7B3;
height:30px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:white;
text-align:center;
font-size:20px;
padding-top:17px;
}
.chat-box-body {
position: relative;
height:300px;
height:auto;
border:1px solid #ccc;
overflow: hidden;
}
.chat-box-body:after {
content: "";
background: blue;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
height:100%;
position: absolute;
z-index: -1;
}
#chat-input {
background: #f4f7f9;
width:77%;
position:relative;
height:47px;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:15px;
border:none;
resize:none;
outline:none;
border:1px solid #ccc;
color:#888;
border-top:none;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
}
.chat-input > form {
margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
color: #ccc;
}
.chat-submit {
position:absolute;
bottom:5px;
right:10px;
background: transparent;
box-shadow:none;
border:none;
border-radius:50%;
color:#46a7b3;
width:35px;
height:35px;
}
.chat-logs {
padding:15px;
height:170px;
overflow-y:scroll;
background: #939393;
}
.chat-logs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar-thumb
{
background-color: #5A5EB9;
}
#media only screen and (max-width: 500px) {
.chat-logs {
height:20vh;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> click me (doesnt work) </button>
<!-- Button trigger modal -->
<div class="wrap">
<button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
<div class="chatbox js-chatbox">
<div class="chat-box" style="display: block;">
<div class="chat-box-header">
Chat
</div>
<div class="chat-box-body">
<div class="chat-box-overlay">
</div>
<div class="chat-logs">
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS>
<button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
</div>
</div>
<!-- End of .chatbox__form -->
</div>
<!-- End of .chatbox.js-chatbox -->
</div>
<!-- End of .wrapper -->

Scale function is doing that, because it holds its position even if its set to 0 it still has full width and height.. Opacity makes it only invisible but still holds the position.
If you want cool efect, dont use css class and use jquery funcion .fadeToggle().

Using display:none and display:block instead of using opacity should fix the issue.
The problem is with visibility(and opacity) the div is still above the button and prevents the event from reaching the button. with display property the div is completely removed from the DOM!
const btn = document.querySelector(".js-chat");
const chatBox = document.querySelector(".js-chatbox");
$("#chat-circle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
$(".chat-box-toggle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
btn.addEventListener("click", () => {
chatBox.classList.toggle("chatbox--is-visible");
if (chatBox.classList.contains("chatbox--is-visible")) {
btn.innerHTML = '<i class="fa fa-times"></i>';
} else {
btn.innerHTML = '<i class="fa fa-comments"></i>';
}
});
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
}
button{
float: right;
margin-top: 70px;
margin-right: 20px;
}
.btn--chat {
align-self: flex-end;
background: #46A7B3;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
color: #fff !important;
display: block;
font-size: 1.8em;
margin-top: 0.5em;
transition: all 300ms ease;
text-align: center;
height: 60px;
width: 60px;
border-radius: 50%;
}
.btn--chat:hover {
background: #37848e;
}
.chatbox {
border-radius: 0.5em;
opacity: 0;
order: -1;
transition: all 300ms ease;
transform-origin: 100% 100%;
transform: scale(0);
visibility: hidden;
width: 300px;
box-shadow: -2px 2px 15px 4px #222d32;
display: none;
}
.chatbox__input {
border-radius: 0.5em;
border: 0;
color: #555;
font-size: 0.9rem;
padding: 2em 1em;
position: relative;
resize: none;
}
.chatbox__input:required {
box-shadow: none;
}
.chatbox__submit {
background: none;
border: 0;
bottom: 0.75em;
cursor: pointer;
color: #3e54a4;
font-size: 0.85rem;
position: absolute;
right: 0.5em;
}
.chatbox--is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
display: block;
}
.chat-box-header {
background: #46A7B3;
height:30px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:white;
text-align:center;
font-size:20px;
padding-top:17px;
}
.chat-box-body {
position: relative;
height:300px;
height:auto;
border:1px solid #ccc;
overflow: hidden;
}
.chat-box-body:after {
content: "";
background: blue;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
height:100%;
position: absolute;
z-index: -1;
}
#chat-input {
background: #f4f7f9;
width:77%;
position:relative;
height:47px;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:15px;
border:none;
resize:none;
outline:none;
border:1px solid #ccc;
color:#888;
border-top:none;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
}
.chat-input > form {
margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
color: #ccc;
}
.chat-submit {
position:absolute;
bottom:5px;
right:10px;
background: transparent;
box-shadow:none;
border:none;
border-radius:50%;
color:#46a7b3;
width:35px;
height:35px;
}
.chat-logs {
padding:15px;
height:170px;
overflow-y:scroll;
background: #939393;
}
.chat-logs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar-thumb
{
background-color: #5A5EB9;
}
#media only screen and (max-width: 500px) {
.chat-logs {
height:20vh;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> click me (doesnt work) </button>
<!-- Button trigger modal -->
<div class="wrap">
<button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
<div class="chatbox js-chatbox">
<div class="chat-box" style="display: block;">
<div class="chat-box-header">
Chat
</div>
<div class="chat-box-body">
<div class="chat-box-overlay">
</div>
<div class="chat-logs">
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS >
<button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
</div>
</div>
<!-- End of .chatbox__form -->
</div>
<!-- End of .chatbox.js-chatbox -->
</div>
<!-- End of .wrapper -->

How to change color of icons on each custom range steps

I have a custom range I have styled and modified.
For each step there is a text value displayed underneath the range in a green box, and icons at the top of each step.
I would like to know, how can I change the background color of the icons when a step has been selected? I have added some additional javascript code that is not working properly.
For instance, on the first step, the group icon will be green, and when you select the next step the person will be green and the group will change to default grey, and so on and so forth...
Thank you.
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
});
// Set active icons
$('.range-icons li').removeClass('active selected');
var icons = $('.range-icons').find('li:nth-child(' + icons + ')');
icons.addClass('active selected');
return style;
});
};
rangeSlider();
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
.range-icons .active {
color: #37adbf;
}
.range-icons .selected::before {
background: #37adbf;
}
.range-icons .active.selected::before {
display: none;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>

you can create classes and add the apropriate class with addClass whenever the the range input changes in range.on("input", with
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('class-'+(this.value))
since your this.value starts from 1 :
var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";
var rangeSlider = function() {
var slider = $(".range-slider"),
range = $(".range-slider__range"),
value = $(".range-slider__value");
slider.each(function() {
value.each(function() {
var value = $(this)
.prev()
.attr("value");
$(this).html(arr[value]);
});
range.on("input", function() {
$(this)
.next(value)
.html(arr[this.value]);
$('.material-icons').attr('class', 'material-icons')
$('.material-icons:nth('+ ( this.value - 1) +')').addClass('material-icons class-'+(this.value))
});
});
};
rangeSlider();
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 0;
}
.range-slider {
width: 24%;
}
.range-slider__range {
-webkit-appearance: none;
/*width: calc(100% - (73px));*/
width: 100%;
height: 6px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: grab;
transition: background .15s ease-in-out;
}
.range-slider__range:active::-moz-range-thumb {
cursor: grabbing;
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__value {
display: block;
position: relative;
color: #fff;
font-size: 12px;
margin-top: 10px;
line-height: 20px;
text-align: center;
background: green;
padding: 0;
}
/*.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}*/
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
/*.range-labels {
margin: 9px -21px 0;
padding: 0;
list-style: none;
}
.range-labels li {
position: relative;
float: left;
width: 60px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
}
.range-labels .active {
color: #37adbf;
}
.range-labels .selected::before {
background: #37adbf;
}
.range-labels .active.selected::before {
display: none;
}*/
/*icons*/
.range-icons {
margin: 9px -20px 0;
padding: 0;
list-style: none;
}
.range-icons li {
position: relative;
float: left;
width: 33%;
text-align: center;
color: #b2b2b2;
font-size: 10px;
}
/* classes with colors you want */
.class-1{
color: red;
}
.class-2{
color: blue;
}
.class-3{
color: orange;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="range-slider">
<ul class="range-icons clearfix">
<li class="active selected"><i class="material-icons class-1">group</i></li>
<li><i class="material-icons">person</i></li>
<li><i class="material-icons">lock</i></li>
</ul>
<input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
<span class="range-slider__value">0</span>
</div>

One methos I use is using svg icons and implement the raw code. You can then manipulate this source with clases and style settings.
Look inside the svg source and finmd the path and rect tags.
document.getElementById("ranger").onchange = function(event) {
document.querySelector(".symbol.standard").style.fill = "rgb(" + event.target.value + ", 80, 160)";
}
svg {
width:200px;
.symbol.standard {
fill: #f00;
}
.symbol.other {
fill: rgb(80, 80, 160);
}
<input id="ranger" type='range' min="0" max="255">
<svg class="singleseat " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.3 63.3"> <title>seat</title>
<rect class="symbol standard" x="16.7" width="57" height="49" rx="12" ry="12"></rect>
<path class="symbol other" d="M79.9,15.8V42.3a12,12,0,0,1-12,12H22.5a12,12,0,0,1-12-12V15.8H0V51.3a12,12,0,0,0,12,12H78.3a12,12,0,0,0,12-12V15.8Z"></path>
</svg>

Getting JSON from URL and then display results in accordion using Javascript

I have created an accordion which I would like to populate using JSON from this link : http://design.propcom.co.uk/buildtest/accordion-data.json
Here is my html:
<div class="accordion js-accordion">
<div class="accordion__item js-accordion-item active">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body" >
<div class="accordion-body__contents" ></div>
</div><!-- end of accordion body -->
</div><!-- end of accordion item -->
<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="accordion-header js-accordion-header"></div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents"></div>
</div>
</div>
</div><!-- end of accordion -->
I am trying to populate the accordion-header js-accordion-header div with the "heading" data from the JSON file and accordion-body__contents with the "contents" data.
This is as far as I have got with the Javascript part:
$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion-header").append("<div>" + element.heading + "</div>");
$(".accordion-body__contents").append("<div>" + element.content + "</div>");
});
}
});
Any help would be greatly appreciated as I feel like I've hit a wall with my current efforts.

There are a few issues here:
We're a bit off when handling the AJAX results
Use the data.blocks property and while looping use the element variable.
As #Danny suggested we have extra AJAX properties
Remove the callback and data properties.
Lastly your html seems over complicated
After seeing the css from your demo site, I was able to include it and remove the JQueryUI thought. Now be sure to append the entire accordion__item element.
With these problems ironed out it should look similar to this:
$.ajax({
url: 'https://design.propcom.co.uk/buildtest/accordion-data.json',
type: 'GET',
dataType: 'JSON',
success: function (data) {
$.each(data.blocks, function(index, element) {
$(".accordion")
.append(`<div class="accordion__item js-accordion-item ">
<div class="accordion-header js-accordion-header">${element.heading}</div>
<div class="accordion-body js-accordion-body">
<div class="accordion-body__contents">${element.content}</div>
</div>
</div>`);
});
var accordion = (function(){
var $accordion = $('.js-accordion');
var $accordion_header = $accordion.find('.js-accordion-header');
var $accordion_item = $('.js-accordion-item');
// default settings
var settings = {
// animation speed
speed: 400,
// close all other accordion items if true
oneOpen: false
};
return {
// pass configurable object literal
init: function($settings) {
$accordion_header.on('click', function() {
accordion.toggle($(this));
});
$.extend(settings, $settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
$('.js-accordion-item.active:not(:first)').removeClass('active');
}
// reveal the active accordion bodies
$('.js-accordion-item.active').find('> .js-accordion-body').show();
},
toggle: function($this) {
if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
$this.closest('.js-accordion')
.find('> .js-accordion-item')
.removeClass('active')
.find('.js-accordion-body')
.slideUp()
}
// show/hide the clicked accordion item
$this.closest('.js-accordion-item').toggleClass('active');
$this.next().stop().slideToggle(settings.speed);
}
}
})();
$(document).ready(function(){accordion.init({ speed: 300, oneOpen: true });});
}
});
body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}body {
font-size: 62.5%;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
line-height: 2;
padding: 5em;
}
.accordion {
font-size: 1rem;
width: 30vw;
margin: 0 auto;
border-radius: 5px;
}
.accordion-header,
.accordion-body {
background: white;
}
.accordion-header {
padding: 1.5em 1.5em;
margin-bottom:6px;
box-shadow: 0px 4px #6F277D;
background: #9E38B0;
text-transform: uppercase;
color: white;
cursor: pointer;
font-size: .8em;
letter-spacing: .1em;
transition: all .3s;
}
.accordion-header:hover {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
position: relative;
z-index: 5;
}
.accordion-body {
background: #fcfcfc;
color: #3f3c3c;
display: none;
}
.accordion-body__contents {
padding: 1.5em 1.5em;
font-size: .85em;
}
.accordion__item.active:last-child .accordion-header {
border-radius: none;
}
.accordion:first-child > .accordion__item > .accordion-header {
border-bottom: 1px solid transparent;
}
.accordion__item > .accordion-header:after {
content: "\f3d0";
font-family: IonIcons;
font-size: 1.2em;
float: right;
position: relative;
top: -2px;
transition: .3s all;
transform: rotate(0deg);
}
.accordion__item.active > .accordion-header:after {
transform: rotate(-180deg);
}
.accordion__item.active .accordion-header {
background: #6844B7;
box-shadow: 0px 4px #4C3185;
}
.accordion__item .accordion__item .accordion-header {
background: #f1f1f1;
color: black;
}
#media screen and (max-width: 1000px) {
body {
padding: 1em;
}
.accordion {
width: 100%;
}
}/* CSS Document */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion js-accordion">
</div>
After skimming your demo, I've included your CSS into my example.

Getting info from placeholder to label

I have code below for a contact form I am creating using HTML, CSS and JavaScript. Is it possible to have label2 under the preview button page to say whatever the user typed into the Detail placeholder on the main page? So if someone wrote "Hello" in the Detail placeholder, label2 on the preview page would say "Hello". Anything helps, cheers.
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
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:477px;
}
#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 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
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;
}
.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: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.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;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#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{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset 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"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>

You could add a new label which contains the value of the relative input, then set its innerHTML with the value you need, so:
add an id to the detail input (placeholder) (ex: id="txtDetail")
add a label (near the label "Detail:" to show the value of txtDetail
finally, before to show the preview, copy the value from txtDatail to label, like:
var input = document.getElementById("txtDetail");
var value = input.value; //<-- getting the value from input text
var label = document.getElementById("labelDetail");
label.innerHTML = value; //<-- setting that value in the label in preview section
See following snippet, please:
function openNav() {
var input = document.getElementById("txtDetail");
var value = input.value;
var label = document.getElementById("labelDetail");
label.innerHTML = value;
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
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:477px;
}
#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 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
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;
}
.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: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.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;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#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{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#labelDetail{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
<div class="container">
<form id="contact" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea id="txtDetail" placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset 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"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="labelDetail"></label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>
I hope it helps you, bye.

you can use jQuery. here is your edited fiddle:
function openNav() {
document.getElementById("myNav").style.width = "100%";
var detail = $('textarea').val(); //gets the value in the textarea
$('#label2').text(detail); //inserts the value into label2
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
* {
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:477px;
}
#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 {
color:white;
display: block;
font-family:Verdana;
font-size: 23px;
font-weight: 300;
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;
}
.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: 477px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 25px;
}
.overlay a {
padding: 5px;
margin-top:-15px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.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;
padding: 13px 32px;
width:125px;
height:45px;
border: none;
font-family:Verdana;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
font-size: 15px;
}
#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{
color:white;
padding-left:25px;
float:left;
font-family:Verdana;
font-size:13px;
}
#label2{
color:white;
padding-left:25px;
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" action="" method="post">
<h3>Connect With HR</h3>
<fieldset class="fieldset">
<div class="dropdown">
<button class="dropbtn">Location</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Category</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</fieldset>
<fieldset class="fieldset">
<textarea placeholder="Detail...." tabindex="2"></textarea>
</fieldset>
<h4>Contact Information</h4>
<fieldset class="fieldset">
<input placeholder="Name" type="text" tabindex="4">
<input placeholder="Preferred Contact Number" type="tel" tabindex="5">
<input placeholder="Preferred Email" type="email" tabindex="6">
</fieldset>
<filedset 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"/>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<div class="container">
<form id="contact" action="" method="post">
<fieldset class"fieldset">
<h5>Summary</h5>
</fieldset>
<fieldset class="fieldset">
<label id="label">Detail:</label>
<label id="label2">Detail Information Here...</label>
</fieldset>
<!-- <fieldset class="fieldset">
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset> -->
</form>
</div>
</div>
</div>
<span id="button"" onclick="openNav()">Preview</span>
<fieldset>
</form>
</div>