"Tab Slide Up and Down "
Bootstrap 4.1.1 Snippet by maneeshsinghhs

<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

Related: See More


Questions / Comments: