For the Catalog form need to add the collapsible container on portal

[is_12]

Hello Community,

Trying to make collapsible sections for catalog item, with display title is working on the native UI.

But on the portal is not not working. so created a variable set with container start with display title true & end along with one single line variable 

And also created a client script with DOM Manipulation 

But is not working, only till alert("hello5") is coming up

function onLoad() {

    var $ = this.jQuery,

        fieldName = "requested_for1"; // !!! it's the name of any variable from variable set !!!

    alert('hello1');

    setTimeout(function() {

        alert('hello2');

        var $fieldset = $("#sp_formfield_" + fieldName).parent().closest("fieldset"),

            $row = $fieldset.children("div.row"),

            $button = $("<button style='margin-right:10px;margin-bottom:2px;' class='btn btn-icon'>" +

                "<i class='fa fa-minus fa-lg'></i></button>");

        alert('hello3');

        $fieldset.children("div").children("legend") // find(">div>legend")

            .prepend($button);

        alert('hello5');

        $button.click(function() {

            alert('hello4');

            $row.toggle();

            $button.find("i")

                .toggleClass("fa-plus fa-minus");

        });

    }, 0);

}

Can anyone suggest me where is failing

Thanks in advance,

[Ankur Bawiskar]

@is_12 

As mentioned it's limitation in portal.

Please inform customer about this

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[is_12]

@Ankur Bawiskar Thank for your response

[ShajuJ]

Use below code it'll work   

function onLoad() {
var fieldName = "requested_for1"; // variable from variable set
var $ = this.jQuery;

// Wait 2 seconds for portal HTML to render properly
setTimeout(function() {
var $fieldset = $("#sp_formfield_" + fieldName).closest("fieldset");
if ($fieldset.length === 0) {
console.warn("Fieldset not found yet, aborting collapsible setup.");
return;
}

var $row = $fieldset.children("div.row");
var $button = $(
"<button style='margin-right:10px;margin-bottom:2px;' class='btn btn-icon'>" +
"<i class='fa fa-minus fa-lg'></i>" +
"</button>"
);

// Prepend the button to the legend
$fieldset.children("legend").prepend($button);

// Toggle row visibility on button click
$button.click(function() {
$row.toggle();
$button.find("i").toggleClass("fa-plus fa-minus");
});
}, 2500); // 2.5 seconds delay
}

If my response helped, please mark it as correct 

[raviteja1600]

Hi @is_12 ,

The same question has asked in the past. you can follow the below link to create the collapse containers.

Link: https://www.servicenow.com/community/developer-forum/how-to-make-collapse-of-container-in-service-po...

If my answer is helpful, please mark it as helpful and accept my solution.

Regards,

Raviteja

[is_12]

Hello @raviteja1600,

From the above article only, I have implemented the same.

But still it is not working