Skip to content

Instantly share code, notes, and snippets.

@jetsloth
Created April 24, 2020 03:38
Show Gist options
  • Save jetsloth/f30858ee5a8ef18ff741c5027b43cb44 to your computer and use it in GitHub Desktop.
Save jetsloth/f30858ee5a8ef18ff741c5027b43cb44 to your computer and use it in GitHub Desktop.
/*///////////////////
JetSloth.com
Display your Collapsible Sections in tabs with this CSS updates
Full article at https://jetsloth.com/labs/display-your-form-with-tabs-using-collapsible-sections/
////////////////////*/
/* /////////////////// Form wrapper /////////////////// */
.form-has-collapsible-sections_wrapper {
margin: 0 auto;
text-align: left;
max-width: 100%;
margin-top: 0px;
padding: 160px 100px;
background:url('https://jetsloth.com/wp-content/uploads/2017/03/Gravity-forms-image-choices-label-8.jpg');
border-radius:5px;
background-size: 1200px;
overflow:hidden;
}
/* /////////////////// Tabs setup /////////////////// */
.collapsible-sections-field .gsection_title:after {
color: #dbe1ec;
font: 400 17px/1 slothicons !important;
}
.collapsible-sections-open h2.gsection_title {
color:white
}
.collapsible-sections-field h2.gsection_title {
font-size:15px
}
.gform_fields {
position: relative!important;
}
.form-has-collapsible-sections .gsection.collapsible-sections-field.collapsible-sections-open {
background: #867aff!important;
transition:all 0.3s ease-in-out;
position: absolute!important;
}
.gfield.collapsible-sections-field {
width: calc(33.333% - 1px);
height: 50px;
position: absolute!important;
top: -43px;
background:white!important;
border:none!important;
transition:all 0.3s ease-in-out;
position: absolute;
}
.gfield.collapsible-sections-field:hover {
background:#f9f9f9!important;
}
.form-has-collapsible-sections .collapsible-sections-collapsible-body {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: none;
background-color: #fff;
position: relative;
z-index: 2;
border-top: 2px solid #f9f9f9;
box-shadow:
0 5.1px 4.7px rgba(0, 0, 0, 0.065),
0 12.4px 11.3px rgba(0, 0, 0, 0.093),
0 23.3px 21.3px rgba(0, 0, 0, 0.115),
0 41.5px 38px rgba(0, 0, 0, 0.137),
0 77.7px 71px rgba(0, 0, 0, 0.165),
0 186px 170px rgba(0, 0, 0, 0.23);
}
/* /////////////////// Tab Positions /////////////////// */
.gfield.collapsible-sections-field:nth-child(1) {
left: 0;
border:none!important;
margin: 0px!important;
padding: 14px 20px 0px 20px!important;
border-top-left-radius: 5px;
}
.gfield.collapsible-sections-field:nth-child(5) {
right: 0;
border:none!important;
margin: 0px!important;
padding: 14px 20px 0px 20px!important;
border-top-right-radius: 5px;
}
.gfield.collapsible-sections-field:nth-child(3) {
left: 50%;
transform:translateX(-50%);
padding: 14px 20px 0px 20px!important;
border:none!important;
margin: 0px!important;
}
.collapsible-tabs-form .gform_fields {
position: relative;
width: 100%;
padding-top: 50px!important;
}
/* Position each tab across the top */
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(1) {
left: 0;
}
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(3) {
left: 50%;
transform: translateX(-50%);
}
.collapsible-tabs-form .gfield.collapsible-sections-field:nth-child(5) {
right: 0;
}
/* /////////////////// Tab title styles /////////////////// */
.gsection_title {
font-size: 18px;
background: none;
padding: 0px;
border-radius: 0px;
color: #3e4a5b;
margin-top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment