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 

In portal that's not supported

not a good practice to use DOM manipulation.

Did you ensure Isolate Script is False for your client script to allow DOM?

💡 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 yes it is false

[Ankur Bawiskar]

@is_12 

try to give some timeout to your script around 2-3 seconds as it takes time to load the HTML in portal pages.

Again insisting this is OOTB limitation collapsible thing doesn't work in portal and don't go with DOM manipulation.

💡 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 

I tried by giving timeout, But still is not working

function onLoad() {

    alert("Outside delay");

    setTimeout(function() {

        alert("Inside  delay");

    }, 5000);

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

}