We Keep Coding

The idea is make click on <a> tag to display dropdown menu items

I have a bootstrap menu that is working fine, you can see the code below, but I want to display the dropdown submenu when I clicked each item in the menu.
For example, if I click on the about us item it doesn't display anything, but when I click the plus sign on that item it displays the submenu.
Any suggest to figure out this functionality?
Thanks.
$(document).ready(function(){
if ($(window).width() < 980) {
// mobile menu
$('.hamburger').click(function (event) {
$(this).toggleClass('h-active');
$('.main-nav').toggleClass('slidenav');
});
$('.header-home .main-nav ul li a').click(function (event) {
$('.hamburger').removeClass('h-active');
$('.main-nav').removeClass('slidenav');
});
}
$(".main-nav .fl").on('click', function(event) {
var $fl = $(this);
$(this).parent().siblings().find('.submenu').slideUp();
$(this).parent().siblings().find('.fl').addClass('flaticon-plus').text("+");
if($fl.hasClass('flaticon-plus')){
$fl.removeClass('flaticon-plus').addClass('flaticon-minus').text("-");
}else{
$fl.removeClass('flaticon-minus').addClass('flaticon-plus').text("+");
}
$fl.next(".submenu").slideToggle();
});
});
.hamburger {
position: relative;
width: 40px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
float: right;
margin-top: 35px
}
.hamburger span {
width: 100%;
height: 2px;
background: #08509e;
display: block;
position: absolute;
right: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.hamburger span.h-top {
top: 0
}
.hamburger span.h-bottom {
bottom: 0;
width: 27px
}
.hamburger span.h-middle {
top: 50%;
margin-top: -1px;
width: 25px
}
.hamburger.h-active span {
width: 100%
}
.hamburger.h-active span.h-top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px
}
.hamburger.h-active span.h-middle {
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.hamburger.h-active span.h-bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px
}
.bottombar {
background-color: #08509e
}
.main-nav>ul {
padding: 0;
margin: 0;
list-style: none
}
.main-nav>ul>li {
display: inline-block;
position: relative;
margin-left: -4px;
padding-right: 15px
}
.main-nav>ul>li+li {
padding: 0 15px
}
.main-nav>ul>li>a {
text-transform: uppercase;
display: block;
text-decoration: none;
color: #000;
line-height: 45px;
font-size: 16px;
position: relative;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.main-nav>ul>li:hover>a {
color: #00b7d7
}
.submenu {
position: absolute;
left: 0;
top: auto;
right: 0;
min-width: 200px;
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
background: #fff;
border: 1px solid #f7f7f7;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
z-index: 9999;
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li {
display: block;
margin: 0 -15px
}
.submenu>li a {
display: block;
padding: 10px 15px;
color: #666;
line-height: 1;
font-size: 14px;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: #f7f7f7;
color: #08509e
}
.main-nav .fl {
width: 30px;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #fff;
font-style: normal;
position: absolute;
right: 5px;
top: 0;
z-index: 999;
display: none
}
.main-nav .fl:before {
font-size: 14px;
text-align: center;
line-height: 35px
}
.main-nav>ul>li+li .submenu {
left: 25px
}
.main-nav>ul>li:hover .submenu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
.content-block {
padding: 70px 0;
position: relative
}
.slideInUp {
visibility: hidden;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
-moz-transform: translate3d(0, 30px, 0);
-ms-transform: translate3d(0, 30px, 0);
-o-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out
}
.is-active .slideInUp {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slideInUp2 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
#media (min-width:980px) {
.hamburger {
display:none;
}
}
#media (max-width: 980px) {
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
padding: 20px;
z-index: 99999;
height: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform .3s ease-in;
-moz-transition: -moz-transform .3s ease-in;
-o-transition: -o-transform .3s ease-in;
transition: transform 0.3s ease-in
}
.main-nav.slidenav {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.main-nav>ul {
float: none
}
.main-nav>ul>li {
display: block;
padding: 0 !important;
margin-left: 0
}
.main-nav>ul>li>a {
font-size: 14px;
color: #fff;
line-height: 35px
}
.main-nav .fl {
display: block;
line-height: 35px
}
.submenu {
position: static;
min-width: 200px;
background: transparent;
border: none;
padding: 5px 15px 5px 25px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: none
}
.submenu>li a {
display: block;
padding: 10px 0;
color: #666;
line-height: 0.8;
font-size: 14px;
color: #ccc;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: transparent;
color: #08509e
}
.slideInUp {
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
<span class="h-top"></span>
<span class="h-middle"></span>
<span class="h-bottom"></span>
</a>
<nav class="main-nav">
<ul>
<li>
ABOUT US
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Mission Statement</li>
<li>Participating Dentists</li>
<li>Services</li>
</ul>
</li>
<li>
PATIENT
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Medical History Forms</li>
<li>Before Surgery</li>
<li>After Surgery</li>
<li>Children and Special Needs Adults</li>
<li>Privacy</li>
<li>Rights and Responsibilities</li>
<li>Financial Information</li>
</ul>
</li>
<li>
INFORMATION
<i class="fl flaticon-plus">+</i>
<ul class="submenu">
<li>Privileging Criteria</li>
<li>Privileging Board Members</li>
<li>Request for Information</li>
</ul>
</li>
<li>MAP & DIRECTIONS</li>
<li>NEWS</li>
<li>EMPLOYMENT</li>
<li>CONTACT US</li>
</ul>
<div class="mob-login hidden-lg">
LOGIN
</div>
</nav>

One method is to display + / - as :after pseudo element:
$(document).ready(function(){
if ($(window).width() < 980) {
// mobile menu
$('.hamburger').click(function (event) {
$(this).toggleClass('h-active');
$('.main-nav').toggleClass('slidenav');
});
$('.header-home .main-nav ul li a').click(function (event) {
$('.hamburger').removeClass('h-active');
$('.main-nav').removeClass('slidenav');
});
}
$(".main-nav .fl").on('click', function(event) {
event.preventDefault();
var $fl = $(this);
$(this).parent().siblings().find('.submenu').slideUp();
/* begin change */
$(this).parent().siblings().find('.fl').removeClass('open');
if($fl.hasClass('open')){
$fl.removeClass('open');
}else{
$fl.addClass('open');
}
/* end change */
$fl.next(".submenu").slideToggle();
});
});
.hamburger {
position: relative;
width: 40px;
height: 30px;
cursor: pointer;
border: 5px solid transparent;
float: right;
margin-top: 35px
}
.hamburger span {
width: 100%;
height: 2px;
background: #08509e;
display: block;
position: absolute;
right: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.hamburger span.h-top {
top: 0
}
.hamburger span.h-bottom {
bottom: 0;
width: 27px
}
.hamburger span.h-middle {
top: 50%;
margin-top: -1px;
width: 25px
}
.hamburger.h-active span {
width: 100%
}
.hamburger.h-active span.h-top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -1px
}
.hamburger.h-active span.h-middle {
-webkit-transform: translateX(-30px);
-moz-transform: translateX(-30px);
-ms-transform: translateX(-30px);
-o-transform: translateX(-30px);
transform: translateX(-30px);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.hamburger.h-active span.h-bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
margin-bottom: -1px
}
.bottombar {
background-color: #08509e
}
.main-nav>ul {
padding: 0;
margin: 0;
list-style: none
}
.main-nav>ul>li {
display: inline-block;
position: relative;
margin-left: -4px;
padding-right: 15px
}
.main-nav>ul>li+li {
padding: 0 15px
}
.main-nav>ul>li>a {
text-transform: uppercase;
display: block;
text-decoration: none;
color: #000;
line-height: 45px;
font-size: 16px;
position: relative;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.main-nav>ul>li:hover>a {
color: #00b7d7
}
.submenu {
position: absolute;
left: 0;
top: auto;
right: 0;
min-width: 200px;
list-style: none;
margin: 0;
padding: 0;
padding: 15px;
background: #fff;
border: 1px solid #f7f7f7;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
z-index: 9999;
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li {
display: block;
margin: 0 -15px
}
.submenu>li a {
display: block;
padding: 10px 15px;
color: #666;
line-height: 1;
font-size: 14px;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: #f7f7f7;
color: #08509e
}
/* begin change */
.main-nav .fl:after {
content: "+";
width: 30px;
font-size: 20px;
line-height: 35px;
text-align: center;
color: #fff;
font-style: normal;
position: absolute;
right: 5px;
top: 0;
z-index: 999;
display: none
}
.main-nav .fl.open:after {
content: "-";
}
/* end change */
.main-nav .fl:before {
font-size: 14px;
text-align: center;
line-height: 35px
}
.main-nav>ul>li+li .submenu {
left: 25px
}
.main-nav>ul>li:hover .submenu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
.content-block {
padding: 70px 0;
position: relative
}
.slideInUp {
visibility: hidden;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transform: translate3d(0, 30px, 0);
-moz-transform: translate3d(0, 30px, 0);
-ms-transform: translate3d(0, 30px, 0);
-o-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out
}
.is-active .slideInUp {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slideInUp2 {
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
#media (min-width:980px) {
.hamburger {
display:none;
}
}
#media (max-width: 980px) {
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
padding: 20px;
z-index: 99999;
height: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: -webkit-transform .3s ease-in;
-moz-transition: -moz-transform .3s ease-in;
-o-transition: -o-transform .3s ease-in;
transition: transform 0.3s ease-in
}
.main-nav.slidenav {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0)
}
.main-nav>ul {
float: none
}
.main-nav>ul>li {
display: block;
padding: 0 !important;
margin-left: 0
}
.main-nav>ul>li>a {
font-size: 14px;
color: #fff;
line-height: 35px
}
.main-nav .fl:after {
display: block;
line-height: 35px
}
.submenu {
position: static;
min-width: 200px;
background: transparent;
border: none;
padding: 5px 15px 5px 25px;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: none
}
.submenu>li a {
display: block;
padding: 10px 0;
color: #666;
line-height: 0.8;
font-size: 14px;
color: #ccc;
text-decoration: none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all 0.3s
}
.submenu>li a:hover {
background: transparent;
color: #08509e
}
.slideInUp {
visibility: visible;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="javascript:void(0)" class="hidden-lg hamburger">
<span class="h-top"></span>
<span class="h-middle"></span>
<span class="h-bottom"></span>
</a>
<nav class="main-nav">
<ul>
<li>
ABOUT US
<ul class="submenu">
<li>Mission Statement</li>
<li>Participating Dentists</li>
<li>Services</li>
</ul>
</li>
<li>
PATIENT
<ul class="submenu">
<li>Medical History Forms</li>
<li>Before Surgery</li>
<li>After Surgery</li>
<li>Children and Special Needs Adults</li>
<li>Privacy</li>
<li>Rights and Responsibilities</li>
<li>Financial Information</li>
</ul>
</li>
<li>
INFORMATION
<ul class="submenu">
<li>Privileging Criteria</li>
<li>Privileging Board Members</li>
<li>Request for Information</li>
</ul>
</li>
<li>MAP & DIRECTIONS</li>
<li>NEWS</li>
<li>EMPLOYMENT</li>
<li>CONTACT US</li>
</ul>
<div class="mob-login hidden-lg">
LOGIN
</div>
</nav>

Create Image modal for image gallery

I'm Trying to create Image modal for image gallery,But I don't see result When Click on Image,I Don't Know where is problem
How I can fixed it?where is my Wrong?I Used this
link https://codepen.io/koolhaus/pen/ajwcE
My code is
<script>
$(document).on('ready', function(){
$modal = $('.modal-frame');
$overlay = $('.modal-overlay');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd
animationend', function(e){
if($modal.hasClass('state-leave')) {
$modal.removeClass('state-leave');
}
});
$('.close').on('click', function(){
$overlay.removeClass('state-show');
$modal.removeClass('state-appear').addClass('state-leave');
});
$('.open').on('click', function(){
$overlay.addClass('state-show');
$modal.removeClass('state-leave').addClass('state-appear');
});
});
$("button").click(function () {
$.ajax({
method: 'GET',
url: './comment?media_id=' + this.id,
success: function (data) {
$("#comments").html(data);
}
});
});
</script>
<div id="comments">
<div class="modal-frame">
<div class="modal">
</div>
</div>
#foreach($array as $img)
<li style="margin:0 auto">
<a class="fancy-btn open">
<img src="{{$img['image']}}">
</a>
</li>
</ul>
#endforeach
</div>

$(document).on('ready', function() {
$modal = $('.modal-frame');
$overlay = $('.modal-overlay');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
if ($modal.hasClass('state-leave')) {
$modal.removeClass('state-leave');
}
});
$('.close').on('click', function() {
$overlay.removeClass('state-show');
$modal.removeClass('state-appear').addClass('state-leave');
});
$('.open').on('click', function() {
$overlay.addClass('state-show');
$modal.removeClass('state-leave').addClass('state-appear');
});
});
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 22px;
background-color: #F2E1AC;
}
.fancy-btn {
-webkit-appearance: none;
cursor: pointer;
outline: none;
border: none;
position: relative;
top: 50%;
display: block;
min-width: 10%;
line-height: 55px;
font-size: 14px;
text-transform: uppercase;
margin: 0 auto;
padding: 0 10px;
background-color: #F2594B;
color: #FFF;
border-radius: 3px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.fancy-btn:hover {
background-color: #f46f63;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
opacity: 0;
visibility: hidden;
z-index: 40;
-moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
-o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
-webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
-webkit-transition-delay: 0s, 0s;
transition: opacity 0.25s ease 0s, visibility 0.35s linear;
}
.modal-overlay.state-show {
opacity: .7;
visibility: visible;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transition-duration: 0.2s, 0s;
-o-transition-duration: 0.2s, 0s;
-webkit-transition-duration: 0.2s, 0s;
transition-duration: 0.2s, 0s;
}
.modal-frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 50;
/* display: table; */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
width: 100%;
text-align: center;
visibility: hidden;
}
.modal-frame.state-appear {
visibility: visible;
}
.modal-frame.state-appear .modal-inset {
-moz-animation: modalComeIn 0.25s ease;
-webkit-animation: modalComeIn 0.25s ease;
animation: modalComeIn 0.25s ease;
visibility: visible;
/* to keep # final state */
}
.modal-frame.state-appear .modal-body {
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
.modal-frame.state-leave {
visibility: visible;
}
.modal-frame.state-leave .modal-inset {
-moz-animation: modalHeadOut 0.35s ease 0.1s;
-webkit-animation: modalHeadOut 0.35s ease 0.1s;
animation: modalHeadOut 0.35s ease 0.1s;
visibility: visible;
}
.modal-frame.state-leave .modal-body {
opacity: 0;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
#-moz-document url-prefix() {
.modal-frame {
height: calc(100% - 55px);
}
}
.modal {
display: block;
vertical-align: middle;
text-align: center;
}
.modal-inset {
position: relative;
padding: 60px;
background-color: white;
min-width: 320px;
min-height: 126px;
margin: auto;
visibility: hidden;
-moz-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.modal-inset .close {
display: block;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
opacity: .4;
}
.modal-inset .close:hover {
opacity: 1;
}
.modal-body {
margin: auto;
opacity: 0;
-moz-transform: translateY(0) scale(0.8, 0.8);
-ms-transform: translateY(0) scale(0.8, 0.8);
-webkit-transform: translateY(0) scale(0.8, 0.8);
transform: translateY(0) scale(0.8, 0.8);
-moz-transition-property: opacity, -moz-transform;
-o-transition-property: opacity, -o-transform;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modal-body h3 {
font-weight: 700;
padding-bottom: 22px;
display: block;
color: #F2594B;
text-align: center;
}
.modal-body p {
padding-bottom: 20px;
}
.modal-body .ps {
font-size: 12px;
opacity: .3;
}
#-webkit-keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-moz-keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-webkit-keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
#-moz-keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
#keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="modal-frame">
<div class="modal">
<div class="modal-inset">
<div class="button close"><i class="fa fa-close"></i></div>
<div class="modal-body">
<h3>Hello header</h3>
<p>body here......</p>
<p class="ps">ps!!!</p>
</div>
</div>
</div>
</div>
<div class="modal-overlay"></div>
<div id="comments">
<li style="margin:0 auto">
<a width="100" height="100" class="fancy-btn open"> <img alt="Image Here" />
</a>
</li>
</div>

How to use jquery function in a tag

I am trying to use some functionality like a sidepanel to open but using an <a> tag.
Could you please help me, below is the code related to it.
HTML
Click Me
jQuery
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
I want to make use of the above jQuery and use it in my <a> tag.

Attach the click event to body and delegate to cd-btn. Adding event handler to element directly doesn't handle dynamic elements. The element cd-btn is in your pop-up. The pop-up HTML is dynamically injected, so when you attach the event the HTML is probably not present. But you can easily add the handler to body and delegate it like:
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
jQuery(function($) {
//open the lateral panel
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event) {
if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
$(function() {
$("#popover-a").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-b').html();
}
});
});
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden {
display: none;
}
.cd-main-content {
text-align: center;
}
.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
.cd-panel-header {
position: fixed;
height: 27px;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
.from-right .cd-panel-header,
.from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 0;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #fafafa;
border-left: 1px solid #c8cacc;
z-index: 1;
width: 70%;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
overflow-y: auto;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
CD PANEL
</div>
<!-- cd-paneCD PANELl-container -->
</div>
<!-- cd-panel -->

Remove -webkit transform/transform class with JavaScript

I'm trying to create an expanding column layout: when you hover over the pictures it blurs and zooms and when you click on it it expands.
I'm trying to remove the blur and zoom effect once the image has expanded.
I've tried removeProp() and document.getElementById('').style.setProperty("webkit-filter", "none") but neither of them worked.
Any insights or tips would be greatly appreciated!!!
Thank you :)
Here's my JS:
var Expand = (function() {
var tile = $('.photo');
var tileLink = $('.photo > .photo-content');
var tileText = tileLink.find('.photo-inner-text');
var stripClose = $('.photo-close');
var tileAnimate = ('.photo:hover');
var expanded = false;
var open = function() {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('photo__expanded');
// add delay to inner text
tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('photo-close__show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
tileAnimate.removeProp('filter', '-webkit-filter');
expanded = true;
}
};
var close = function() {
if (expanded) {
tile.removeClass('photo__expanded');
// remove delay from inner text
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('photo-close__show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
expanded = false;
}
}
var bindActions = function() {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Expand.init();
My CSS (a little messy, I apologize):
#import url(https://fonts.googleapis.com/css?family=Oswald);
body {
margin: 0;
padding: 0;
background-color: #000;
}
div {
margin: 0;
padding: 0;
}
.main-container {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.photo {
background-color: #0c2d50;
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: 1s;
}
.photo:nth-child(1) {
left: 0;
background: url("../images/image1.jpg");
background-size: cover;
}
.photo:nth-child(2) {
left: 20vw;
background: url("../images/image2.jpg");
background-size: cover;
}
.photo:nth-child(3) {
left: 40vw;
background: url("../images/image3.jpg");
background-size: cover;
}
.photo:nth-child(4) {
left: 60vw;
background: url("../images/image4.jpg");
background-size: cover;
}
.photo:nth-child(5) {
left: 80vw;
background: url("../images/image1.jpg");
background-size: cover;
}
.photo:active,
.photo:hover {
opacity: 1;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform:scale(1.15); /* Safari and Chrome */
-moz-transform:scale(1.15); /* Firefox */
-ms-transform:scale(1.15); /* IE 9 */
-o-transform:scale(1.15); /* Opera */
transform:scale(1.15);
}
.photo {
background-color: #000;
height: 100vh;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-o-transition: all .5s ease; /* IE 9 */
-ms-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
.photo:nth-child(1) .photo-content {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-animation-name: photo1;
animation-name: photo1;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.photo:nth-child(2) .photo-content {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-name: photo2;
animation-name: photo2;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.photo:nth-child(3) .photo-content {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-animation-name: photo3;
animation-name: photo3;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.photo:nth-child(4) .photo-content {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-name: photo4;
animation-name: photo4;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.photo:nth-child(5) .photo-content {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-animation-name: photo5;
animation-name: photo5;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/*******************************************************
.photo a:active img,
.photo a:hover img {
opacity: .6;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform:scale(1.15); /* Safari and Chrome
-moz-transform:scale(1.15); /* Firefox
-ms-transform:scale(1.15); /* IE 9
-o-transform:scale(1.15); /* Opera
transform:scale(1.15);
}
.photo img {
height: 100vh;
-webkit-transition: all .5s ease; /* Safari and Chrome
-moz-transition: all .5s ease; /* Firefox
-o-transition: all .5s ease; /* IE 9
-ms-transition: all .5s ease; /* Opera
transition: all .5s ease;
}
****************************************************/
.photo-content {
position:relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* text hidden */
.photo-title {
color: #ffffff;
text-align: center;
font-family: 'Oswald';
font-size: 4em;
line-height: 1.2em;
z-index: 1000;
width: 100%;
position: absolute;
top: 60px;
left: 10px;
opacity: 0;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-o-transition: all .5s ease; /* IE 9 */
-ms-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
/* text shown on hover */
.photo a:active .photo-title,
.photo a:hover .photo-title {
opacity: 1;
-webkit-animation: flicker 2s infinite; /* Flicker effect */
-webkit-transition: all 1.5s ease; /* Safari and Chrome */
-moz-transition: all 1.5s ease; /* Firefox */
-o-transition: all 1.5s ease; /* IE 9 */
-ms-transition: all 1.5s ease; /* Opera */
transition: all 1.5s ease;
}
#-webkit-keyframes flicker {
0% {opacity:0;}
9% {opacity:0;}
10% {opacity:.5;}
13% {opacity:0;}
20% {opacity:.5;}
25% {opacity:1;}
}
/* added for slider */
.main-container .photo-content {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.main-container .photo-content:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.05;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-container .photo-inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
-webkit-transform: translate(-50%, -50%) scale(0.5);
-ms-transform: translate(-50%, -50%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.photo__expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
min-height: 100vh;
}
.photo__expanded .photo-title {
opacity: 0;
}
.photo__expanded .photo-inner-text {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.photo-close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.photo-close__show {
opacity: 1;
}
#-webkit-keyframes photo1 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo1 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo3 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo3 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo4 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo4 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo5 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo5 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fa {
font-size: 30px;
color: white;
}
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Abtin Animation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootloader.css">
</head>
<body>
<section class="main-container">
<article class="photo">
<div class="photo-content">
<div class="photo-title">LAUGH</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">DREAM</div>
<div class="photo-inner-text"><h1>hey</h1><p>testing</p></div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">LIVE</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">PLAY</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">LAUGH</div>
</div>
</article>
<i class="fa fa-close photo-close"></i>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

dropzone js onclick submit file upload

upload all files with a single button click.
HTML:
<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>
JS:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
But the file is upload after drag and drop..

use simple code
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(element, {
url: "/upload.php",
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});

I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example,
HTML
<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>
JavaScript
$('#submit-all').on('click', function() {
var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
// Do something with the files.
});

Here how i implement delayed uploading (initiated by click on any button, for an example):
Dropzone implementation
var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
maxFilesize: 5, // MB
parallelUploads: 5,
uploadMultiple: true,
acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
maxFiles: 10,
init: function() {
this.on("removedfile", function (file) {
// delete from our dict removed file
delete addedFilesHash[file];
});
},
accept: function(file, done) {
var _id = count++;
file._id = _id;
addedFilesHash[_id] = done;
}
});
Somewhere else
// get all uploaded files in array
var addedFiles = Object.keys(addedFilesHash);
// iterate them
for (var i = 0; i< addedFiles.length; i++) {
// get file obj
var addedFile = addedFiles[i];
// get done function
var doneFile = addedFilesHash[addedFile];
// call done function to upload file to server
doneFile();
}
We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.

I got just finished messing around with this myself- I wanted to add information about the image to a database at the same time as uploading it. Dropping a file opens the input form for the extra info and then the queue needs sending after the form button is pressed.
I finally achieved this by putting a jquery click event handler inside the init 'on add file' function event:
this.on("addedfile", function(file){
var myDropzone = this;
$('#imageinfoCont').animate({left:'4.5%'});//brings form in
$('#imgsubbutt').click(function(){
$('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
myDropzone.processQueue(); //processes the queue
});
});
I am then adding the extra data in a separate 'on sending' function event (could probably do it in the above code but baby steps I think).
Seems to work like a charm.

Although this has been answered, I ran into a situation where I only wanted to submit the queue IF it was a certain type of file. The bug I ran into was it was ignoring processQueue.
this.dropzone = new Dropzone('#my-dropzone', {
autoProcessQueue: false,
});
return this.dropzone.on('addedfile', (function(_this) {
return function(file) {
var IMAGE_EXTENSIONS, ext;
IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
ext = (_.last(file.name.split('.'))).toLowerCase();
if (_.include(IMAGE_EXTENSIONS, ext)) {
return console.log('IMAGE!');
} else {
return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
return _this.dropzone.processQueue();
}, 10);
}
};
})(this));
I had to use the setTimeout seen above because processQueue did nothing if I didn't defer it in this manner.

Working example
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('.dropzone-file', {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
autoProcessQueue: false,
});
$('.upload-files').on('click', function() {
var files = $('.dropzone-file').get(0).dropzone.getAcceptedFiles();
//upload bar
$('.dz-upload').addClass('dz-progress-bar');
// Do something with the files.
console.log(files)
});
.dropzone-file{
border: 1px dashed green;
padding: 1%;
text-align: center;
}
.dropzone-file:hover{
cursor:pointer;
background:whitesmoke;
}
#-webkit-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-moz-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-moz-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.dropzone-file,
.dropzone-file * {
box-sizing: border-box;
}
.dropzone-file {
min-height: 150px;
border: 2px solid rgba(0, 0, 0, 0.3);
background: #fff;
padding: 20px 20px;
}
.dropzone-file.dz-clickable {
cursor: pointer;
}
.dropzone-file.dz-clickable * {
cursor: default;
}
.dropzone-file.dz-clickable .dz-message,
.dropzone-file.dz-clickable .dz-message * {
cursor: pointer;
}
.dropzone-file.dz-started .dz-message {
display: none;
}
.dropzone-file.dz-drag-hover {
border-style: solid;
}
.dropzone-file.dz-drag-hover .dz-message {
opacity: 0.5;
}
.dropzone-file .dz-message {
text-align: center;
margin: 2em 0;
}
.dropzone-file .dz-message .dz-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.dropzone-file .dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px;
}
.dropzone-file .dz-preview:hover {
z-index: 1000;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone-file .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-image-preview {
background: #fff;
}
.dropzone-file .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dropzone-file .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none;
}
.dropzone-file .dz-preview .dz-remove:hover {
text-decoration: underline;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
}
.dropzone-file .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px;
}
.dropzone-file .dz-preview .dz-details .dz-filename {
white-space: nowrap;
}
.dropzone-file .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis;
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent;
}
.dropzone-file .dz-preview .dz-details .dz-filename span,
.dropzone-file .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
}
.dropzone-file .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px);
}
.dropzone-file .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10;
}
.dropzone-file .dz-preview .dz-image img {
display: block;
}
.dropzone-file .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview .dz-success-mark,
.dropzone-file .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px;
}
.dropzone-file .dz-preview .dz-success-mark svg,
.dropzone-file .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px;
}
.dropzone-file .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.dropzone-file .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
}
.dropzone-file .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite;
}
.dropzone-file .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden;
}
.dropzone-file .dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.dropzone-file .dz-preview.dz-error .dz-error-message {
display: block;
}
.dropzone-file .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto;
}
.dropzone-file .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: #fff;
}
.dropzone-file .dz-preview .dz-error-message:after {
content: "";
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626;
}
.dz-progress-bar {
width: 0;
animation: progress 1.5s ease-in-out forwards;
}
#keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<!--begin::Dropzone-->
<div class="dropzone-file fileuploader">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
<i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="fs-5 fw-bolder text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fs-7 fw-bold text-gray-400">Upload any kind of files</span>
</div>
<!--end::Info-->
</div>
</div>
<!--end::Dropzone-->
<button class='upload-files'>Upload Files</button>