Expandable panel

From pmusers
Jump to: navigation, search

The following DynaForm contains JavaScript code to expand and contract the text inside a panel. When a button is clicked, the text will either be hidden or shown depending on the current label of the button.


DynaForm: Expandable Panel.json (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-05-22)
Tested in: ProcessMaker 3.2.1 Community in Debian 8.4 with Firefox 51


Create a panel inside a DynaForm. Add the following HTML code to the panel:

<p><button type="button" id="termsButton" style="display: inline; padding: 0px; margin: 0; width: 22px; height: 22px; 
    border: 1px solid grey; border-radius: 5px;">
  <span id="termsSpan" style="font-size: 12px; padding: 1px; font-weight: bold">+</span></button> 
  <strong>Terms and Conditions</strong>
</p>
<div id="termsDiv">
<p>The party of the first party will be subject to the rules of the party of the second part 
  in the following license agreement.</p>
<p>More mind numbing legalese...</p>
<p><small>More text that nobody will ever read...</small></p>  
</div>

Then, add the following JavaScript to the DynaForm:

$("#termsDiv").hide(); //hide the Terms and Conditions by default

$("#termsButton").click( function() {
  if ($("#termsSpan").text() == "+") {
    $("#termsDiv").show();
    $("#termsSpan").text("-");
  }
  else {
    $("#termsDiv").hide();
    $("#termsSpan").text("+");
  }
});

When the "+" button with the ID "termsButton" is clicked:

termsAreHidden.png

The text inside the div with the ID "termsDiv" is shown if the button's label is "+" or it is hidden if its label is "-".

termsAreShown.png