/***
* styles for tabs
***/
.tab_heading {
background-color: #ddd;
color: #aaa;
font-size: 13px;
display: inline-block;
font-weight: bold;
margin-right:5px;
padding:5px;
border: 1px solid #ddd;
}
.tab_heading_active, .tab_heading:hover {
background: #aaa;
color: #fff;
font-size: 13px;
display: inline-block;
margin-right:5px;
padding:5px;
border:1px solid #aaa;
}
/***
* END styles for tabs
***/
/***
* styles for form contents
***/
.frm_section_heading { /* wraps around each section
width: 100%;
border: 1px solid #aaa;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
margin-top: 0px;
overflow: hidden;
padding-left:5px;
padding-right:5px;
}
.frm_pos_top { /* The heading part */
}
/***
* END styles for form contents
***/
jQuery('.frm-show-form').prepend('
'); // place this wherever you want your tabs to show up
jQuery('.frm_section_heading').each(function(i, obj) { // for each section heading in form
heading = jQuery(this).find('.frm_pos_top').text(); // grab the heading title
jQuery('#tab_headings').append( '
' + heading + '
'); // create a tab for each heading and target the form section with it
if(i == 0) jQuery('#tab_headings').find('[target="'+jQuery(this).attr('id')+'"]').addClass('tab_heading_active'); // set the first tab to active
if(i != 0) jQuery(this).hide(); // hide the form section if it's not the first section
});
jQuery('.tab_heading').click(function() { // if a tab is clicked
jQuery('.frm_section_heading').hide(); // hide all sections in form
jQuery('.tab_heading').removeClass('tab_heading_active'); // remove active status from all tabs
jQuery(this).addClass('tab_heading_active'); // set the clicked tab to active
jQuery('#'+jQuery(this).attr('target')).show(); // show the form section targeted by the tab
});