Collapsible element in knowledge article (ServiceNowDevProgram#834)

Author: abhrajyotikanrar

UI Actions/Add collapsible element in knowledge article/README.md

@@ -0,0 +1,5 @@
+This code snippet will allow you to use collapsible element within knowledge atricle which will make articles clean, organized and effective.
+
+![Demo](https://github.com/abhrajyotikanrar/code-snippets/assets/25823899/e3ad356e-a5c5-4f2d-aafa-20f89b0da248)
+
+Please check out the above demo on how this code-snippet can be used.

UI Actions/Add collapsible element in knowledge article/UI_Action.js

@@ -0,0 +1,12 @@
+/*
+This script should be placed in the UI action on the table kb_knowledge form view.
+This UI action should be marked as client.
+Use addCollapsible() function in the Onclick field.
+*/
+
+function addCollapsible() {
+    var gm = new GlideModal("add_collapsible");
+    gm.setTitle('Add collapsible');
+    gm.setWidth(1000);
+    gm.render();
+}

UI Actions/Add collapsible element in knowledge article/add_collapsible.js

@@ -0,0 +1,54 @@
+******HTML*****
+<?xml version="1.0" encoding="utf-8" ?>
+<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
+
+	<style>
+		.hide{
+			visibility: hidden;
+		}
+		.show{
+			visibility: visible;
+		}
+	</style>
+
+	<label for="collapsibleTitle">Title</label>
+    <input type="text" class="form-control" id="collapsibleTitle" placeholder="Your collapsible title goes here" />
+
+	<br />
+
+	<label for="collapsibleContent">Content body</label>
+    <textarea class="form-control" id="collapsibleContent" rows="3"></textarea>
+
+	<br />
+
+	<div class="alert alert-danger hide" id="alert" role="alert">
+		<b>Title</b> and <b>Content body</b> should not be empty.
+	</div>
+
+	<br/>
+	
+	<button type="button" class="btn btn-primary" style="float: right;" onclick="updateForm()">Add collapsible</button>
+</j:jelly>
+****************
+
+**Client Script**
+function updateForm() {
+    $j("#alert").removeClass("show");
+    $j("#alert").addClass("hide");
+
+    var title = $j("#collapsibleTitle").val();
+    var content = $j("#collapsibleContent").val();
+
+    if (title.trim() == "" || content.trim() == "") {
+        $j("#alert").removeClass("hide");
+        $j("#alert").addClass("show");
+
+        return;
+    }
+
+    var articleText = g_form.getValue("text");
+    var collapsibleElement = "<details style='width: 100%; border: 1px solid #ccc;'><summary style='cursor: pointer; padding: 15px; background: #e8e8e8;'>" + title.trim() + "</summary><div style='padding: 15px;'>" + content.trim() + "</div></details>";
+
+	g_form.setValue("text", articleText + collapsibleElement);
+	GlideDialogWindow.get().destroy()
+}