Split every 5
by Ryan Perez
HTML
<div class="form-block animated fadeIn current" name="form-group-5" style="display: block;"><div class="form-td"><tr>
<td>
<h1 class="mar-30">Accreditation </h1>
</td>
</tr></div><div class="form-td">
<label for="CAT_Custom_39">Diploma/Bachelors:</label>
<br>
<input type="text" maxlength="4000" name="CAT_Custom_39" id="CAT_Custom_39" class="cat_textbox">
</div><div class="form-td">
<label for="CAT_Custom_40">Postgraduate/Masters:</label>
<br>
<input type="text" maxlength="4000" name="CAT_Custom_40" id="CAT_Custom_40" class="cat_textbox">
</div><div class="form-td"><tr>
<td>
<h2>IELTS Score: (if Applicable) <a class="btn btn-primary waves-effect waves-light brand-color-secondary-comp-background" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Show
</a> </h2>
</td>
</tr></div><div class="form-td">
<label for="CAT_Custom_42">IELTS Score: Listening</label>
<br>
<input type="text" maxlength="255" name="CAT_Custom_42" id="CAT_Custom_42" class="cat_textbox">
...
CSS
.compress {background:red}
.ass {background:blue}
JavaScript
function collapseGroup(groupName, selector) {
var parentDiv = $(groupName);
var h2title = parentDiv.find('h2').parent();
h2title.addClass('compress');
$('.compress').each(function() {
$(this).nextUntil('.compress').wrapAll('<div id="' + selector + '" class="hide5"></div>');
});
}
collapseGroup('div[name="form-group-5"]');