hi guys this is really amzing Accordion Tab To Contact Form , Referral Form by Kelly H a codepen user.
1. The HTML/Pug
[code language=”Html”]
div.container.positions
h2 Job Openings
ul
li.pos-card#pos_1
div.content
div.title.new UI/UX Designer
div.dept Design
div.date June 4
div.refer Refer
ul.desc
–
list = ["6+ years’ experience designing desktop and mobile apps.",
"Deep appreciation for simple solutions to complex problems.",
"An amazing portfolio demonstrating successful delivery of innovative design solutions."
]
each item in list
li= item
li.pos-card#pos_2
div.content
div.title Sales Manager
div.dept Sales
div.date April 21
div.refer Refer
ul.desc
–
list = ["Determines annual unit and gross-profit plans by implementing marketing strategies; analyzing trends and results.",
"Implements national sales programs by developing field sales action plans.",
"Establishes and adjusts selling prices by monitoring costs, competition, and supply and demand."
]
each item in list
li= item
li.pos-card#pos_3
div.content
div.title Business Analyst
div.dept Research
div.date March 15
div.refer Refer
ul.desc
–
list = ["Technical tasks (include coding, web pages, stored procedures, all database related work, technical design & specifications, loading data).",
"Developing and documenting reports or data extracts starting from an end user request.",
"Developing and documenting specifications for software, websites and e-commerce development or modifications."
]
each item in list
li= item
div.return Return to listings
div.container.refer-card
div.modal.confirmed
span.close-modal
h2 Thank you!
p <span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.
div.sign-up.card
div.card__header
h1 Employee Referral
div.description For more information, please consult the <a href="#">employee handbook</a>.
div.card__content
form(method=’post’).referral
div.field.line
input(maxlength="240" type="text" name="name" value="" required).req#name
label(for="name" class="placeholder") Full Name
div.field.line
input(maxlength="240" type="email" name="email" value="" required).req#email
label(for="email" class="placeholder") Email
div.field.line.inline
input(maxlength="240" type="text" name="position" value="" required).req#position
label(for="position" class="placeholder") Position
div.field.inline.right
span.dropdown-wrapper
select(name="department")#choice.empty
option(value="" selected="selected") Department
option(value="1") Development
option(value="2") Sales
option(value="3") QA
option(value="4") Design
option(value="5") HR
option(value="6") Research
div
input(type="submit" value="Submit" disabled)#btn
a(href="#").reset Reset
[/code]
2. The CSS/SCSS
[code language=”css”]
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import ‘compass’;
$color-white: #fff;
html {
display: flex;
}
body {
//background: #2C3B4F;
@include background-image(linear-gradient(left bottom, #557b8e 0%,#c7e5ce 100%));
width: 100%;
// margin: auto;
-webkit-text-size-adjust: 100%;
font-family: ‘Lato’, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h2 {
color: #fff;
}
input {
-webkit-appearance: none;
}
*, *:after, *:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
html,body{min-height:100%;}
.card {
border-radius: 5px;
background-color: $color-white;
display: flex;
flex-wrap: wrap;
&__header {
flex-basis: 100%;
margin: 80px 20px 40px;
.description {
color: #777;
font-size: .8rem;
text-align: center;
}
}
&__content {
flex-basis: 100%;
padding: 50px;
position: relative;
}
}
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
}
.req {
border: 0 none;
font-size: 1rem;
line-height: 2.5rem;
outline: none;
transition: all .1s linear;
width: 100%;
position: relative;
&:focus {
outline: 0;
background: rgba(255,255,255,1);
}
}
.field {
&.line {
border-bottom: 1px solid #eee;
}
margin-bottom: 40px;
position: relative;
}
.placeholder {
cursor: text;
position: absolute;
top: 10px;
color: #909090;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease-in-out;
}
input {
display: block;
width: 100%;
border: 0;
border-radius: 0;
font-size: 16px;
font-weight: 400;
background: rgba(255,255,255,0.97);
color: #212121;
outline: 0;
appearance: none;
transition: all 0.2s ease-in-out;
&.ui-full + label,
&:focus + label {
color: #3FB8AF;
font-size: 12px;
transform: translate3d(0, -25px, 0);
}
}
label {
position: absolute;
color: #909090;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease-in-out;
}
#choice option {
color: black;
}
.empty { color: gray; }
#choice {
font-family: ‘Lato’;
border-radius: 5px;
cursor: pointer;
padding: 10px;
padding-right: 50px;
margin-top: 5px;
font-size: .9rem;
}
.dropdown-wrapper {
border: 1px solid #eee;
border-radius: 5px;
padding: 10px 5px;
position: relative;
&:after {
font-family: ‘FontAwesome’;
content: "\f107";
color: #3FB8AF;
position: absolute;
right: 10px;
top: 12px;
}
&.outline {
border: 1px solid rgba(#3FB8AF, .5);
box-shadow: 0 0 10px rgba(#3FB8AF, .2);
}
}
select {
appearance: none;
background: none;
border: 0 none;
font-size: .8em;
outline: 0;
}
.right {
float: right;
}
.inline {
display: inline-block;
}
#btn {
background-color: #fff;
border: 1px solid #3FB8AF;
color: #3FB8AF;
font-weight: bold;
border-radius: 5px;
font-size: 1rem;
margin-top: 20px;
padding: 20px;
width: 100%;
cursor: pointer;
transition: all 0.2s ease-in-out;
&:hover {
background-color: #3FB8AF;
color: #fff;
}
&:active {
background-color: darken(#3FB8AF, 5%);
}
&[disabled] {
background-color: #fff !important;
color: #3FB8AF !important;
opacity: .3;
cursor: not-allowed;
}
}
a {
color: #3FB8AF;
&:hover {
color: darken(#3FB8AF, 5%);
}
}
.ui-full:invalid + label{
color: red;
}
.modal {
background-color: $color-white;
border-radius: 5px;
display: none;
padding: 30px 50px 30px 90px;
margin-bottom: 30px;
position: relative;
&.show {
animation: grow 1s 1;
animation-fill-mode: forwards;
}
&.shrink {
animation: shrink 1.5s 1;
animation-fill-mode: forwards;
}
&:before {
color: #3FB8AF;
content: "\f00c";
font-family: ‘FontAwesome’;
font-size: 40px;
position: absolute;
left: 25px;
top: 50%;
margin-top: -25px;
}
h2 {
color: #3FB8AF;
font-size: 1.2rem;
margin-bottom: 20px;
}
p {
font-size: .9rem;
line-height: 1.5rem;
}
}
@keyframes grow {
0% {
opacity:0;
transform: rotate(0deg) scaleX(0) scaleY(0) ;
}
70% {
opacity:1;
transform: rotate(0deg) scaleX(1.1) scaleY(1.1) ;
}
100% {
opacity:1;
transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
}
@keyframes shrink {
0% {
opacity:1;
transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
100%{
opacity:0;
transform: rotate(0deg) scaleX(0) scaleY(0) ;
}
}
@keyframes fade {
0% {
opacity:0;
transform: translateY(10px);
}
100%{
opacity:1;
transform: translateY(0);
}
}
@keyframes fadeOut {
0%{
opacity:1;
transform: translateY(0);
}
100% {
opacity:0;
transform: translateY(10px);
}
}
.focus {
font-weight: bold;
}
#refer_pos {display: inline-block;}
.close-modal {
cursor: pointer;
float: right;
position: relative;
&:before {
color: #aaa;
content: "\f00d";
position: absolute;
right: -40px;
top: -20px;
padding: 10px;
font-family: ‘FontAwesome’;
transition: all 0.2s ease-in-out;
}
&:hover:before {
color: darken(#aaa, 10%);
}
}
.reset {
color: #777;
cursor: pointer;
font-size: .8rem;
margin: 0 auto;
margin-top: 30px;
padding: 10px 20px;
text-align: center;
display: table;
transition: all 0.2 ease-in-out;
&:hover {
color: darken(#777, 10%);
}
}
.refer-card {
margin: 0 auto;
margin-bottom: 100px;
max-width: 475px;
display: none;
transition: all 0.6s ease-in-out;
&.fade {
display: block;
animation: drop .3s 1;
animation-fill-mode: forwards;
}
}
@keyframes drop {
0% {
transform: translateY(-70px) ;
}
100%{
transform: translateY(0px) ;
}
}
li {
list-style: none;
}
.positions {
display: table;
margin: 100px auto;
width: 475px;
transition: all 0.3s ease-in-out;
animation: fade .3s 1;
animation-fill-mode: forwards;
&.fadeOut {
display: none;
animation: fadeOut .4s 1;
animation-fill-mode: forwards;
}
ul {
background-color: #fff;
border-radius: 5px;
position: relative;
}
.pos-card {
border-bottom: 1px solid #eee;
cursor: pointer;
padding: 25px;
flex-basis: 100%;
margin: auto;
transition: all 0.4s ease-in-out;
&:hover {
box-shadow: 0 0 20px rgba(0,0,0,0.2);
.date {
right: 100px;
}
.refer {
right: 0;
opacity: 1;
z-index: 9;
}
}
&:last-child {
border-bottom: 0 none;
}
}
.content {
position: relative;
}
.title {
margin-bottom: 5px;
&.new:after {
content:"New";
padding: 4px 6px;
font-size: .6rem;
margin-left: 10px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
background-color: #3FB8AF;
border-radius: 3px;
}
}
.dept {
color: #777;
font-size: .8rem;
}
.date, .refer {
font-size: .8rem;
position: absolute;
right: 0;
top: 0;
display: table;
bottom: 0;
margin: auto;
color: #777;
transition: all 0.3s ease-in-out;
}
.refer {
opacity: 0;
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #ddd;
transition: all 0.2s ease-in-out;
&:hover {
background-color: #f8f8f8;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
}
.desc {
display: none;
color: #555;
font-size: .9rem;
transition: all 0.2s ease-in-out;
&.reveal {
display: block;
animation: fade .5s 1;
animation-fill-mode: forwards;
padding-top: 30px;
visibility: visible;
}
li {
list-style: circle;
margin-bottom: 15px;
line-height: 1.5rem;
margin-left: 20px;
&:last-child {
margin-bottom: 0;
}
}
}
}
h2 {
margin-bottom: 30px;
}
.return {
display: none;
width: 475px;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 50px;
color: #fff;
cursor: pointer;
font-size: .9rem;
transition: all 0.2s ease-in-out;
position: relative;
padding: 15px;
opacity: 1;
&:hover {
opacity: .7;
}
&:before {
content: "\f104";
font-family: ‘FontAwesome’;
color: #fff;
position: absolute;
left: 0;
font-weight: bold;
font-size: 1rem;
opacity: 1;
transition: all 0.2s ease-in-out;
}
&:hover:before {
opacity: .7;
}
}
[/code]
3. The javascript
[code language=”js”]
$(‘.btn’).click(function(){
$(‘.dropdown-menu’).toggle();
});
$(‘#choice’).change(function () {
if($(this).val() == "") {
$(this).addClass("empty");
}
else {
$(this).removeClass("empty")}
});
$(‘form > div input, form > div select’).change(function() {
var empty = false;
$(‘.req’).each(function(){
if ($(this).val()==""){
$(this).removeClass(‘ui-full’)
}
else {
$(this).addClass(‘ui-full’);
}
});
if ($(‘#choice’).val()==""){
empty = true;
}
$(‘form > div input’).each(function() {
if ($(this).val() == ” ){
empty = true;
}
});
if (empty) {
$(‘#btn’).attr(‘disabled’, ‘disabled’);
}
else {
$(‘#btn’).removeAttr(‘disabled’);
}
});
$(‘.referral’).submit(function(e) {
if (this.checkValidity()){
e.preventDefault();
$("html, body").animate({ scrollTop: 0 }, 600);
$(‘#refer_name’).html($(‘#name’).val());
$(‘#refer_pos’).html($(‘#position’).val());
$(‘.modal’).slideDown().addClass(‘show’).removeClass(‘shrink’);
e.preventDefault();
}
else {}
});
$(‘.close-modal’).click(function(){
$(‘.modal’).removeClass(‘show’).addClass(‘shrink’).slideUp();
})
$(‘.reset’).click(function(){
$(‘.modal’).removeClass(‘show’).addClass(‘shrink’).slideUp();
$(‘.req’).val("").removeClass(‘ui-full’);
$(‘#choice’).val("").addClass(’empty’);
$(‘#btn’).attr(‘disabled’, ‘disabled’);
});
$(‘select’).focus(function(){
$(‘.dropdown-wrapper’).addClass(‘outline’);
});
$(‘select’).on(‘focusout’,function(){
$(‘.dropdown-wrapper’).removeClass(‘outline’);
});
$(‘.pos-card’).click(function(){
$(‘.desc’).removeClass(‘reveal’);
$(this).find(‘.desc’).toggleClass(‘reveal’);
});
$(‘.refer’).click(function(e){
e.stopPropagation();
// $(‘.positions’).animate({ height: ‘toggle’, opacity: ‘toggle’ }, ‘medium’);
$(‘.positions’).addClass(‘fadeOut’);
$(‘.refer-card’).addClass(‘fade’);
$(‘.return’).fadeIn(‘fast’);
});
$(‘.return’).click(function(){
$(‘.refer-card’).removeClass(‘fade’);
$(this).hide();
$(‘.positions’).delay(‘200’).removeClass(‘fadeOut’);
$(‘.desc’).removeClass(‘reveal’);
});
$(‘#pos_1 .refer’).click(function(){
$(‘#position’).val(‘UI/UX Designer’).addClass(‘ui-full’);
$(‘#choice’).val(4).removeClass(’empty’);
});
$(‘#pos_2 .refer’).click(function(){
$(‘#position’).val(‘Sales Manager’).addClass(‘ui-full’);
$(‘#choice’).val(2).removeClass(’empty’);
});
$(‘#pos_3 .refer’).click(function(){
$(‘#position’).val(‘Business Analyst’).addClass(‘ui-full’);
$(‘#choice’).val(6).removeClass(’empty’);
});
[/code]
