Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed the accordion in FAQ page #1913

Merged
merged 4 commits into from
Dec 16, 2024
Merged

Fixed the accordion in FAQ page #1913

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7b9bf1c
enhanced accordian
Nishakulkarni06 Dec 15, 2024
6b90b29
Added changes
Rakesh9100 Dec 16, 2024
c4062cf
Removed extra line break
Rakesh9100 Dec 16, 2024
f64380a
Removed unused lines of code
Rakesh9100 Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion assets/faq/faq.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@

.faqs_container {
height: 100%;
width: 100%;
width: 80%;
padding-left: 20%;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
Expand Down
1 change: 0 additions & 1 deletion assets/faq/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@
<div class="faqHeading">Frequently Asked Questions</div>
<div class="faqs">
<div class="faqs_container"></div>
<div class="faqs_container"></div>
</div>
</main>

Expand Down
88 changes: 53 additions & 35 deletions assets/faq/faq.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ document.addEventListener("DOMContentLoaded", function () {
}, 500);
});


// The FAQ Data
const faq = [
{
Expand Down Expand Up @@ -67,49 +66,68 @@ const faq = [
},
];

/**
*
* @param {MouseEvent} e
*/

// The Function to toggle the FAQ Content
function toggleContent(e) {
const content = e.currentTarget.faqContent;
content.show = !content.show;

content.style.height = content.show
? content.scrollHeight + 20 + `px`
: `0px`;
content.style.padding = content.show ? `10px 0` : `0`;
// Create the accordion
const faqContainer = document.querySelector(".faqs_container");

const plus = e.currentTarget.plus;
plus.style.transform = content.show ? `rotate(45deg)` : `none`;
}
faq.forEach((item) => {
// Create the FAQ item
const faqItem = document.createElement("div");
faqItem.classList.add("faq");

// The Template Function for the FAQ
faq.forEach(function (item, index) {
const faqItem = document.createElement(`div`);
faqItem.classList.add(`faq`);
// Create the title and toggle button
faqItem.innerHTML = `
<div class="faq_title">
<span>${item.question}</span>
<div class="plusBtn">
<svg class="plus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ff1b82" viewBox="0 0 16 16" stroke-width="2" stroke="#ff1b82">
<path fill-rule="evenodd" d="M8 0a.75.75 0 01.75.75v6.5h6.5a.75.75 0 010 1.5h-6.5v6.5a.75.75 0 01-1.5 0v-6.5H.75a.75.75 0 010-1.5h6.5V.75A.75.75 0 018 0z"/>
</svg>
<div>
<div class="faq_title">
<span>${item.question}</span>
<div class="plusBtn">
<svg
class="plus"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="#ff1b82"
viewBox="0 0 16 16"
stroke-width="2"
stroke="#ff1b82"
>
<path
fill-rule="evenodd"
d="M8 0a.75.75 0 01.75.75v6.5h6.5a.75.75 0 010 1.5h-6.5v6.5a.75.75 0 01-1.5 0v-6.5H.75a.75.75 0 010-1.5h6.5V.75A.75.75 0 018 0z"
/>
</svg>
</div>
`;

faqItem.plus = faqItem.querySelector(`.plus`);
</div>
`;

const faqContent = document.createElement(`div`);
faqContent.classList.add(`faq_content`);
// Create the content section
const faqContent = document.createElement("div");
faqContent.classList.add("faq_content");
faqContent.innerHTML = item.answer;
faqContent.style.height = "0px"; // Start collapsed
faqItem.appendChild(faqContent);

faqItem.faqContent = faqContent;
// Append to the container
faqContainer.appendChild(faqItem);

// Toggle content
faqItem.querySelector(".faq_title").addEventListener("click", () => {
const allFaqs = document.querySelectorAll(".faq_content");
allFaqs.forEach((content) => {
if (content !== faqContent) {
content.style.height = "0px"; // Collapse others
content.parentNode
.querySelector(".plus")
.style.transform = "none"; // Reset plus icon
}
});

// Toggle current FAQ
const isOpen = faqContent.style.height !== "0px";
faqContent.style.height = isOpen ? "0px" : faqContent.scrollHeight + "px";
faqItem.querySelector(".plus").style.transform = isOpen
? "none"
: "rotate(45deg)";
});
});
faqItem.addEventListener(`click`, toggleContent);
document.querySelectorAll(`.faqs_container`)[index % 2].appendChild(faqItem);
});
Loading