Hiding components using js

Photoshop UXP Plugin API
, , ,
1

Greeetings,

I am making my first plugin and am running into multiple issues. Most of them I have managed to fix by myself, however I just couldn’t find a way to fix this one.

I have a checkbox in my html that I would like to use to enable and disable content. However, since the content looks weird being disabled, I want to hide it as well. disabled works fine but I can’t just get opacity to work. Any help? I am assigning a class to a div which should make it fully transparent

<sp-checkbox id="exportClose"> Export before closing</sp-checkbox>
<div id="exportContent" class="hidden">
    <sp-heading size="S">Export Folder</sp-heading>
    <sp-body size="S" id="exportFolderPath">Folder path</sp-body>
    <sp-button id="btnExport" variant="secondary" disabled>Choose Export Folder</sp-button>
</div>

here is the css:

#hidden {
        opacity: 0;
    }

As for the js code, here it is, although I can’t get it to work even when setting it manually.

function enableExport(isChecked) {
    const exportContent = document.getElementById("exportContent");
    if (isChecked) {
        exportContent.classList.add("hidden");
    } else {
        exportContent.classList.remove("hidden");
    }
}
2

Is your CSS an id selector? It may work if you change it to a .hidden class selector.

3

As far as I know, first of all, you can’t have multiple ids on one element. Second of all, I tried changing it to id and it doesn’t change anything. the elements are still visible

4

Since #hidden is the way to write an id selector, I am suggesting that it be a class selector for .hidden. In other words, I think your interpretation is the opposite.

5

Yeah that would do it. Thanks. My first time touching javascript in a long while so sorry for such a simple change.

1 Like