How to toggle FOLD field type using JS

1

Hi,

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

2

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();

3

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){
		show_fold(frm);
	}
});

var show_fold = function(frm) {
    var sections = document.getElementsByClassName("row form-section visible-section");
    console.log(sections);
    sections[2].childNodes[0].childNodes[0].click();
}
4

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);?

5

i tried with

sections[0].childNodes[0].childNodes[0].click();

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
6

ouuuuw!:persevere:
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?

7

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

8

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

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

var show_fold = function(frm) {
    var sections = document.getElementsByClassName("form-clickable-section text-center");
    console.log(sections);
    sections[0].childNodes[1].click();
}
1 Like
9

Thank you so much @joelios :+1:

1 Like