Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Tab Slide Up and Down "
Bootstrap 4.1.1 Snippet by
maneeshsinghhs
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
1.8K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> @extends('layouts.app') @section('content') <div class="full_loader section_loader hide" > <i class="fa fa-spinner fa-spin"></i> </div> <section id="middle"> <!-- page title --> <header id="page-header"> <ol class="breadcrumb"> <li><a href="#">Manage Employer</a></li> <li class="active">Edit Employer</li> </ol> </header> <!-- /page title --> <div id="content" class="padding-20"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default employer-details"> <div class="panel-body add_employer_form"> <!-- required [php action request] --> <input type="hidden" name="action" value="contact_send" /> <div class="panel-group" id="addNewEmployer" role="tablist" aria-multiselectable="true"> <div class="heading-sec"> <h4 class="panel-title">Upload File</h4> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#loanuploadfile" aria-expanded="true" aria-controls="loanCriteriaDetails">Upload CSV File</a> </h4> </div> <div id="loanuploadfile" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> </div> </div> </div> <div class="heading-sec mt-30"> <h4 class="panel-title">Upload File</h4> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#loanCriteriaDetails" aria-expanded="true" aria-controls="loanCriteriaDetails">Loan Criteria Details & Qualifiying Criteria</a> </h4> </div> <div id="loanCriteriaDetails" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="row"> <div class="col-md-4 col-sm-12"> <div class="form-group"> <label>Set of Rules</label> <select id="rule_set_id" class="form-control pointer required" name="rule_set_id"><option value="1">Default set of rules</option><option value="2">Rule set $2000-$5000</option><option value="3">Annual rule</option><option value="4">6 months Rule</option></select> </div> </div> <div class="col-md-4 col-sm-12"> <div class="form-group"> <label>Set of Rates</label> <select id="rate_set_id" class="form-control pointer required" name="rate_set_id"><option value="1">Default rates</option><option value="2">Default Set of rates</option><option value="3">Jim set of rates</option><option value="4">Target specific set of rates</option><option value="5">Annual Rate</option><option value="6">6 months rate</option><option value="7">qq</option></select> </div> </div> <div class="col-md-4 col-sm-12"> <div class="form-group"> <label>Set of Fees</label> <select id="fee_set_id" class="form-control pointer required" name="fee_set_id"><option value="1">Default set of fees</option><option value="2">Target set of fees</option><option value="3">Annual Fee</option><option value="4">Half yearly Fee</option></select> </div> </div> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label>Full Time Minimum Tenure (months)</label> <input id="min_months_tenure" oncopy="return false" onpaste="return false" oncut="return false" class="form-control required" placeholder="Full Time Minimum Tenure (months)" name="min_months_tenure" type="text"> </div> </div> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label>Part Time Minimum Tenure (months) (Optional)</label> <input id="part_time_min_months_tenure" oncopy="return false" onpaste="return false" oncut="return false" class="form-control required" placeholder="Part Time Minimum Tenure (months)" name="part_time_min_months_tenure" type="text"> </div> </div> </div> <!-- <div class="save_btn"> <a href="javascript:void(0)" data-target="#loanCriteriaDetails" class="btn btn-success update-employer-btn" data-type="criteria">Update</a> <a href="javascript:void(0)" data-target="#loanCriteriaDetails" data-toggle="collapse" class="btn btn-default" >Cancel</a> </div> --> </div> </div> </div> <div class="panel panel-default"> <button type="button" class="btn btn-default btn-sm" id="frequency_btn" data-toggle="modal" data-target="#frequencyModal" style="display: none;">Payroll Frequency</button> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#payrollFrequency" aria-expanded="true" aria-controls="payrollFrequency" id="">Payroll Frequency</a> </h4> </div> <div id="payrollFrequency" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="weekly_tab"> <div class="switch_text" id="ps1"> <span>Weekly</span> <div class="toggle_container"> <span class="label label-warning" id="ps_status_sa3">Pending Employer Approval.</span> <label class="switch switch switch-round switch-success nopadding"> <input type="checkbox" id="pschk1"> <span class="switch-label"></span> </label> </div> </div> <div class="weekly_tab_content" id="weekly_tab_1"> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label>Contracted Day of Week for Weekly Payments</label> <select class="form-control pointer required" id="p_f_days" name="p_f_days"><option value="Sunday">Sunday</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option></select> </div> </div> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label>Last Pay Date</label> <input class="form-control datepicker1 required" data-format="yyyy-mm-dd" id="p_f_last_pay_date" placeholder="Last Pay Date" readonly="" name="p_f_last_pay_date" type="text"> <span class="invalid-feedback alert-danger payfrequency_errors" id="last_pay_date_1" role="alert"></span> </div> </div> <div class="col-md-6 col-sm-6"> <input type="button" name="manage_pay_schedule" id="weekly" class="btn btn-primary manage_pay_schedule" value="View Pay Schedule"> </div> </div> </div> </div> <div class="weekly_tab"> <div class="switch_text" id="ps2"> <span>Bi-weekly</span> <div class="toggle_container"> <span class="label label-warning" id="ps_status_sa3">Pending Employer Approval.</span> <label class="switch switch switch-round switch-success nopadding"> <input type="checkbox" id="pschk2"> <span class="switch-label"></span> </label> </div> </div> <div class="weekly_tab_content" id="weekly_tab_2"> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label>Contracted Day of Week for Bi-Weekly Payments</label> <select class="form-control pointer required" id="p_f_days_bi" name="p_f_days_bi"><option value="Sunday">Sunday</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option></select> </div> </div> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label>Last Pay Date</label> <input class="form-control datepicker required" data-format="yyyy-mm-dd" id="p_f_last_pay_date_bi" placeholder="Last Pay Date" readonly="" name="p_f_last_pay_date_bi" type="text"> <span class="invalid-feedback alert-danger payfrequency_errors" id="last_pay_date_2" role="alert"></span> </div> </div> <div class="col-md-6 col-sm-6"> <input type="button" name="manage_pay_schedule" id="bi_weekly" class="btn btn-primary manage_pay_schedule" value="View Pay Schedule"> </div> </div> </div> </div> <!-- <div class="save_btn"> <a href="javascript:void(0)" data-target="#payrollFrequency" data-toggle="collapse" class="btn btn-success" data-type="payrollFrequency">Update</a> <a href="javascript:void(0)" data-target="#payrollFrequency" data-toggle="collapse" class="btn btn-default" data-type="basic">Cancel</a> </div> --> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#payrollProvider" aria-expanded="true" aria-controls="payrollProvider">Payroll Provider</a> </h4> </div> <div id="payrollProvider" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label>Payroll Provider</label> <select id="payroll_provider" class="form-control pointer required" name="payroll_provider"><option value="0">Internal</option><option value="1">Employee Pay</option><option value="7">Payroll provider AA</option></select> </div> </div> </div> <!-- <div class="save_btn"> <a href="javascript:void(0)" data-target="#payrollProvider" class="btn btn-success update-employer-btn" data-type="provider">Update</a> <a href="javascript:void(0)" data-target="#payrollProvider" data-toggle="collapse" class="btn btn-default" data-type="basic">Cancel</a> </div> --> </div> </div> </div> <div class="save_btn text-right mb-20"> <a href="javascript:void(0)" class="btn btn-success update-employer-btn btn-lg">Submit</a> <a href="javascript:void(0)" class="btn btn-default btn-lg">Cancel</a> </div> </div> <input type="hidden" id="employer_id" name="employer_id" value="employer_id"> </div> </div> </div> </div> </div> </section> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- Frequency Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> <!-- <script type="text/javascript"> $(function () { $(".switch_text input").click(function () { if ($(this).is(":checked")) { $(".weekly_tab_content").slideDown(); } else { $(".weekly_tab_content").slideUp(); } }); }); </script> --> <!-- <script type="text/javascript"> $('input[type=checkbox]').click(function(){ var flag = $(this).prop('checked'); $('.weekly_tab_content').slideUp(); if(flag) { $(this).parents('.weekly_tab').find('.weekly_tab_content').slideDown(); } else{ $(this).parents('.weekly_tab').find('.weekly_tab_content').slideUp(); } }); </script> --> <!-- <script type="text/javascript"> $('input[type=checkbox]').click(function(){ var flag = $(this).prop('checked'); if(flag) { $(this).parents('.weekly_tab').find('.weekly_tab_content').slideDown(); } else{ $(this).parents('.weekly_tab').find('.weekly_tab_content').slideUp(); } }); </script> --> <script type="text/javascript"> $('input[type=checkbox]').click(function(){ var flag = $(this).prop('checked'); var el=$(this).parents('.weekly_tab').find('.weekly_tab_content'); if(flag) { $(el).slideDown(); } else{ $(el).slideUp(); } }); </script> @endsection
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76