Make Accordion FAQs Without Extra Plugin

Hello generatepress users, If you are looking for style for the FAQ accordion with question to be bold, initially hide the answer, toggle icon, transition for smooth accordion effect? without using a extra plugin then you can use my method which will be working lite weight way to implement the feature by adding some CSS and JS code.

Which I have dome with my Website: Ex- https://whitescreentest.net/

Let’s Do Yourself

Copy the CSS code Appearance>> Additional CSS> Paste.

/* Center the FAQ container */
.schema-faq {
    width: 100%; /* You can adjust this width as needed */
    max-width: 800px; /* Limit the width for readability */
    margin: 0 auto; /* Centers the div horizontally */
    padding: 20px;
    box-sizing: border-box;
}

/* Style for the FAQ accordion */
.schema-faq .schema-faq-section {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    cursor: pointer; /* Make it clear that this section is clickable */
}

/* Style the question to be bold */
.schema-faq .schema-faq-question {
    cursor: pointer;
    font-weight: bold;
    display: block; /* Ensure it takes full width */
    margin-bottom: 10px;
}

/* Initially hide the answer */
.schema-faq .schema-faq-answer {
    display: none;
    padding: 10px 0;
}

/* Add a toggle icon */
.schema-faq .schema-faq-question::after {
    content: '\002B'; /* Plus symbol */
    float: right;
    font-size: 18px;
    font-weight: bold;
}

.schema-faq .schema-faq-section.active .schema-faq-question::after {
    content: '\2212'; /* Minus symbol */
}

/* Show the answer when the section is active */
.schema-faq .schema-faq-section.active .schema-faq-answer {
    display: block;
}

/* Optional: Add some transition for smooth accordion effect */
.schema-faq .schema-faq-answer {
    transition: max-height 0.3s ease-in-out;
}

Now Add the JS on your theme directory >> Like this: /wp-content/themes/generatepress/js/faq-accordion.js

document.addEventListener('DOMContentLoaded', function() {
    var faqSections = document.querySelectorAll('.schema-faq .schema-faq-section');
    
    faqSections.forEach(function(section) {
        var question = section.querySelector('.schema-faq-question');
        
        question.addEventListener('click', function() {
            section.classList.toggle('active');
        });
    });
});

Now it’s time to equre the JS on our theme functions.php So edit your theme function.php and paste the code below on bottom.

wp_enqueue_script('faq-accordion-js', get_template_directory_uri() . '/js/faq-accordion.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_faq_script');

Note: Please re-check you have set the JS file path according to your actual JS file path.

That’s it now you’re theme FAQs will show the Style for the FAQ accordion. (I’m using Yoast SEO)

View post on imgur.com

Thank You Hope It’s Help You.

The page I need help with: [log in to see the link]