The following jQuery example shows or hide a paragraph when selecting buttons.
The HTML code for the jQuery Custom component is:
<div class="container">
<p id="paragraph-to-hide">If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
The JavaScript code for the jQuery Custom component is:
await loadExternalScript("https://code.jquery.com/jquery-3.7.1.min.js");
function myQuery(selector) {
return jQuery(selector, document);
}
/* Click on Hide */
myQuery("#hide").click(function () {
myQuery("#paragraph-to-hide").hide();
});
/* Click on Show */
myQuery("#show").click(function () {
myQuery("#paragraph-to-hide").show();
});
document.querySelector('#container').appendChild(jqueryScript);