ERPNext Conference 2019* Blog

How to toggle FOLD field type using JS



I’ve 4 fold field types in a form, i want to open and close those fields using js on some conditions.


select the element (fold (section)), and use the js standard function click(); to open/close it.

for e.g.:
var sections = document.getElementsByClassName("row form-section visible-section"); sections[2].childNodes[0].childNodes[0].click();


here is what i’ve tried, but its not working. and one thing more where are we defining that which fold will be opened? i’ve multiple folds on a doctype, i need to open one fold at a time according to some conditions.

frappe.ui.form.on("Test", {
	refresh: function(frm){

var show_fold = function(frm) {
    var sections = document.getElementsByClassName("row form-section visible-section");


the variable sections from sections[2].childNodes[0].childNodes[0].click(); is a list of all fold elements.
so if you want to click on the first element, you have to write sections [0] , for the second sections [1] and so on…

what does your console print out at console.log(sections);?


i tried with


but its not opening fold, currently i’ve just one fold on my test doctype.

console.log prints

HTMLCollection(4) [div.row.form-section.form-dashboard.hidden.visible-section, div.row.form-section.visible-section.shaded-section, div.row.form-section.visible-section, div.row.form-section.visible-section.shaded-section]
0: div.row.form-section.form-dashboard.hidden.visible-section
1: div.row.form-section.visible-section.shaded-section
2: div.row.form-section.visible-section
3: div.row.form-section.visible-section.shaded-section
length: 4
__proto__: HTMLCollection


sorry my bad! i thought you mean a “fold (collabsed) section”, but you mean a “fold field”!

how is the name of your fold field?


yes i am talking about fold field, :stuck_out_tongue:
field name is fold_10


Try this (have it tested on a test vm of me and it works :wink: ):

frappe.ui.form.on("Anfrage", {
	refresh: function(frm){

var show_fold = function(frm) {
    var sections = document.getElementsByClassName("form-clickable-section text-center");


Thank you so much @joelios :+1: