FAQ Dropdown Widget (#1602)

- Implemented a responsive FAQ dropdown widget for ServiceNow Portal.
- Included interactive functionality for question and answer visibility.
- Styled the widget with CSS for an enhanced user experience.
- Added sample questions and answers in the client script.

Author: Southpaw09

Service Portal Widgets/Dropdown Widget/README.md

@@ -0,0 +1,23 @@
+# FAQ Dropdown Widget
+
+This is a simple FAQ dropdown widget for ServiceNow Portal that allows users to click on questions to reveal their answers. The widget is designed to enhance user experience by providing easy access to frequently asked questions.
+
+## Features
+
+- Interactive dropdown for questions and answers.
+- Animated arrow indicators that change based on the answer's visibility.
+- Simple and clean design that fits seamlessly into the ServiceNow Portal.
+
+## Usage
+
+Add the Widget to a Page
+Once the widget is created, add it to a desired page in your ServiceNow portal.
+Interact with the FAQ
+Load the portal to view the widget and click on the questions to reveal the answers.
+
+
+## Customization
+
+
+You can modify the faqs array in the Client Script to add your own questions and answers.
+Customize the CSS styles to match your portal's design.

Service Portal Widgets/Dropdown Widget/index.html

@@ -0,0 +1,12 @@
+<div class="faq-widget">
+    <h2>Frequently Asked Questions</h2>
+    <div ng-repeat="faq in faqs" class="faq-item">
+        <div class="faq-question" ng-click="faq.show = !faq.show">
+            <h3>{{ faq.question }}</h3>
+            <span ng-class="{'arrow-up': faq.show, 'arrow-down': !faq.show}"></span>
+        </div>
+        <div class="faq-answer" ng-show="faq.show">
+            <p>{{ faq.answer }}</p>
+        </div>
+    </div>
+</div>

Service Portal Widgets/Dropdown Widget/script.js

@@ -0,0 +1,21 @@
+api.controller = function($scope) {
+    // Sample FAQs
+    $scope.faqs = [
+        {
+            question: 'What is ServiceNow?',
+            answer: 'ServiceNow is a cloud-based platform that helps companies manage their digital workflows.'
+        },
+        {
+            question: 'How do I create a ticket?',
+            answer: 'You can create a ticket by navigating to the Service Desk and filling out the form.'
+        },
+        {
+            question: 'What are the system requirements?',
+            answer: 'ServiceNow is a cloud-based solution, so it only requires a modern web browser to access.'
+        },
+        {
+            question: 'How do I reset my password?',
+            answer: 'You can reset your password by clicking on the "Forgot Password" link on the login page.'
+        }
+    ];
+};

Service Portal Widgets/Dropdown Widget/style.css

@@ -0,0 +1,58 @@
+.faq-widget {
+    max-width: 600px;
+    margin: auto;
+    font-family: Arial, sans-serif;
+}
+
+h2 {
+    text-align: center;
+    color: #333;
+}
+
+.faq-item {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+}
+
+.faq-item:hover {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.faq-question {
+    background-color: #007bff; /* Header background color */
+    color: white;
+    padding: 15px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between; /* Align question and arrow */
+    align-items: center; /* Center vertically */
+}
+
+.faq-question h3 {
+    margin: 0; /* Remove default margin */
+}
+
+.faq-answer {
+    padding: 15px;
+    background-color: #f9f9f9; /* Answer background color */
+    color: #333;
+}
+    
+.arrow-up {
+    border: solid white;
+    border-width: 0 4px 4px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(-135deg);
+}
+
+.arrow-down {
+    border: solid white;
+    border-width: 0 4px 4px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+}