HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.color1 {
background-color: #14213D;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.color2 {
background-color: #FFFF00;
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.color3 {
background-color: #8B008B;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion color1">GlideForm API ServiceNow</button>
<div class="panel">
<strong>GlideForm.js is the JavaScript class containing the methods. The global object g_form is used to access GlideForm methods. GlideForm methods are only used on the client. Or g_form.addOption dynamically display the choices in my select box field.
<a href="https://www.workingcode.in/question/glideform-api-servicenow/">Cick here for more details</a></strong>
</div>
<button class="accordion color2"> How to Show dynamic data in dashboard</button>
<div class="panel">
<strong>How to dynamically show data of any table on dashboard using content block Jelly ServiceNow?<a href="https://www.workingcode.in/question/how-to-dynamically-show-data-of-any-table-on-dashboard-using-content-block-jelly-servicenow/">Cick here for more details</a></strong>
</div>
<button class="accordion color3">g_user object ServiceNow</button>
<div class="panel">
<strong>g_user object can be used only in UI client side ServiceNow<a href="https://www.workingcode.in/question/g_user-object-can-be-used-only-in-ui-client-side-servicenow/">Cick here for more details</a></strong> </div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
Accordion in Service Portal widget working code ServiceNow
Working Code Asked question July 26, 2023