Versions Compared

Old Version 1

changes.mady.by.user Brian Banet

Saved on

compared with

New Version 2

changes.mady.by.user Brian Banet

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Create a new CSS file on your server called PanelStyles.css.

  2. Add the following CSS to the file, and save it to the GlobalForms\client\dist\view folder on the server.

    Code Block
    languagecss
    titlePanelStyles.css
    .clickable{
    cursor: pointer;   
}

.panel-heading span {
	margin-top: -20px;
	font-size: 15px;
}


  3. Create a new Javascript file on your server, called panleLogic.js.

  4. Add the following Javascript to the file, and save it to the GlobalForms\client\dist\view folder on the server.

    Code Block
    languagejs
    titlepanelLogic.js
    jQuery(document).ready(function(){
	jQuery(".panel-body-open .panel-heading").append("<span class='pull-right clickable'><i class='glyphicon glyphicon-chevron-up'></i></span>");
	jQuery(".panel-body-closed .panel-heading").append("<span class='pull-right clickable panel-collapsed'><i class='glyphicon glyphicon-chevron-down'></i></span>");
	jQuery(".panel-body-closed .panel-body").addClass('collapse'); //Collapse specific panels by default.
});


jQuery(document).on('click', '.panel-heading span.clickable', function(e){
	var $panel = jQuery(this);
	if(!$panel.hasClass('panel-collapsed')) {
		$panel.parents('.panel').find('.panel-body').slideUp();
		$panel.addClass('panel-collapsed');
		$panel.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
	} else {
		$panel.parents('.panel').find('.panel-body').slideDown();
		$panel.removeClass('panel-collapsed');
		$panel.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
	}
})



;


With the Javascript and CSS saved to the server, collapsing functionality can be added to any GlobalForms simply by adding references to the files.