FAQ Template 1

Date: January 5, 2024
Developed By: Paul Baretto

Python is often recommended for beginners due to its readability and simplicity. Its syntax is clear and easy to understand, making it an excellent choice for those just starting with programming. Additionally, Python has a vast and supportive community that provides ample resources and documentation for learners.

To enhance your JavaScript skills, it's essential to practice regularly. Engage in hands-on learning by building small projects, participating in coding challenges on platforms like LeetCode or HackerRank, and exploring advanced concepts like asynchronous programming. Additionally, reading documentation and staying updated on the latest ECMAScript features can deepen your understanding.

HTML (HyperText Markup Language) is a markup language used for structuring content on the web. It provides the basic structure of a webpage, defining elements like headings, paragraphs, and links. CSS (Cascading Style Sheets), on the other hand, is a styling language used to control the presentation and layout of HTML elements. CSS defines how the content should be visually displayed, including aspects like colors, fonts, and spacing

Responsive web design is an approach that ensures a website looks good and functions well on various devices and screen sizes. This is achieved by using flexible grids and layouts, along with media queries, to adapt the design to different viewport sizes. The goal is to provide an optimal viewing experience, whether the user is accessing the site on a desktop, tablet, or smartphone.

View Source

HTML

<div class="faq-main-wrapper">
        <div class="faq-container">
            <div class="faq-tabs">
                <div class="faq-tab-buttons-holder">
                    <ul class="faq-tab-buttons">
                        <li>
                            <button class="faq-tab-btn tab-active" faq-data-value="general"><span><i
                                        class="fa-solid fa-circle-info"></i></span>General</button>
                        </li>
                        <li>
                            <button class="faq-tab-btn" faq-data-value="payments"><span><i
                                        class="fa-solid fa-money-check-dollar"></i></span>Payments</button>
                        </li>
                        <li>
                            <button class="faq-tab-btn" faq-data-value="delivery"><span><i
                                        class="fa-solid fa-truck"></i></span>Deliveries</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="faq-holder">
                <div class="faq-main">
                    <!-- general  -->
                    <div class="faq-general-wrap faq-wrap" faq-data-value="general" style="display: block;" >
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button >
                                    <span class="faq-title-text">What is the best programming language for beginners?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Python is often recommended for beginners due to its readability and simplicity. Its syntax is clear and easy to
                                    understand, making it an excellent choice for those just starting with programming. Additionally, Python has a vast and
                                    supportive community that provides ample resources and documentation for learners.
                                </p>
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button>
                                    <span class="faq-title-text">How can I improve my JavaScript skills?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    To enhance your JavaScript skills, it's essential to practice regularly. Engage in hands-on learning by building small
                                    projects, participating in coding challenges on platforms like LeetCode or HackerRank, and exploring advanced concepts
                                    like asynchronous programming. Additionally, reading documentation and staying updated on the latest ECMAScript features
                                    can deepen your understanding.
                                </p>
                               
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button >
                                    <span class="faq-title-text">What are the key differences between HTML and CSS?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    HTML (HyperText Markup Language) is a markup language used for structuring content on the web. It provides the basic
                                    structure of a webpage, defining elements like headings, paragraphs, and links. CSS (Cascading Style Sheets), on the
                                    other hand, is a styling language used to control the presentation and layout of HTML elements. CSS defines how the
                                    content should be visually displayed, including aspects like colors, fonts, and spacing
                                </p>
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button>
                                    <span class="faq-title-text">What is responsive web design?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Responsive web design is an approach that ensures a website looks good and functions well on various devices and screen
                                    sizes. This is achieved by using flexible grids and layouts, along with media queries, to adapt the design to different
                                    viewport sizes. The goal is to provide an optimal viewing experience, whether the user is accessing the site on a
                                    desktop, tablet, or smartphone.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- payments  -->
                    <div class="faq-payment-wrap faq-wrap" faq-data-value="payments" style="display: none;">
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button >
                                    <span class="faq-title-text">How can I debug JavaScript code effectively?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Debugging JavaScript effectively involves using a combination of tools and techniques. Browser developer tools, such as
                                    those in Chrome or Firefox, offer powerful debugging features. Inserting console.log statements strategically in your
                                    code can help track the flow and values of variables. For more advanced debugging, consider using integrated development
                                    environments (IDEs) like Visual Studio Code, which provides a robust debugging interface.
                                </p>
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button>
                                    <span class="faq-title-text">What is the purpose of version control in software development?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Version control is crucial in software development for tracking changes to code, collaborating with team members, and
                                    ensuring a reliable history of project modifications. Git, a widely used version control system, allows developers to
                                    create branches for different features or bug fixes, merge changes, and revert to previous versions if issues arise.
                                    This systematic approach helps maintain code integrity and facilitates collaboration among developers.
                                </p>
                              
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button >
                                    <span class="faq-title-text">Can you recommend a good text editor for coding?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Several text editors cater to the diverse needs of developers. Visual Studio Code (VSCode) is a popular choice due to
                                    its versatility, extensive extension support, and an active community. Atom and Sublime Text are also widely used,
                                    offering customizable interfaces and robust features. The best text editor depends on personal preferences and the
                                    specific requirements of the development workflow.
                                </p>
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button>
                                    <span class="faq-title-text">How can I optimize website performance?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Optimizing website performance involves several strategies. Minimizing HTTP requests by combining files, optimizing
                                    images for the web, using asynchronous loading for scripts, and employing techniques like lazy loading for certain
                                    elements are effective methods. Additionally, optimizing server response times, leveraging browser caching, and
                                    utilizing content delivery networks (CDNs) contribute to a faster and more responsive user experience.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- delivery  -->
                    <div class="faq-payment-wrap faq-wrap" faq-data-value="delivery" style="display: none;">
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button >
                                    <span class="faq-title-text">What is the purpose of the Document Object Model (DOM) in web development?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    The Document Object Model (DOM) is a programming interface that represents the structure of a document as a tree of
                                    objects. In web development, the DOM is a crucial component, allowing scripts to dynamically access and modify the
                                    content and structure of a webpage. By manipulating the DOM, developers can create interactive and dynamic user
                                    interfaces, updating the content without requiring a full page reload.
                                </p>
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button>
                                    <span class="faq-title-text">How can I stay updated on the latest trends in frontend development?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    Staying updated on frontend development trends involves actively engaging with the community and industry resources.
                                    Follow reputable tech blogs, participate in online communities like Stack Overflow or Reddit, attend conferences, and
                                    subscribe to newsletters from organizations like MDN Web Docs or CSS-Tricks. Additionally, exploring new technologies
                                    through documentation, tutorials, and experimenting with side projects can help you stay ahead in the rapidly evolving
                                    field.
                                </p>
                               
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button >
                                    <span class="faq-title-text">Is it essential to learn a JavaScript framework like React or Vue?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    While not mandatory, learning JavaScript frameworks like React or Vue can significantly enhance your ability to build
                                    complex and interactive user interfaces efficiently. These frameworks provide reusable components, efficient state
                                    management, and a structured approach to building modern web applications. Choosing a framework depends on project
                                    requirements and personal preferences, but familiarity with at least one popular framework can broaden your skill set
                                    and make you more versatile as a frontend developer.
                                </p>
                            </div>
                        </div>
                        <div class="faq-accordion-holder">
                            <div class="faq-accord-title">
                                <button>
                                    <span class="faq-title-text">What is the significance of the term 'AJAX' in web development?</span>
                                    <span class="faq-title-icon"><i class="accordIcon fa-solid fa-angle-down"></i></span>
                                </button>
                            </div>
                            <div class="faq-inner">
                                <p>
                                    AJAX, which stands for Asynchronous JavaScript and XML, is a web development technique that allows web pages to update
                                    asynchronously by exchanging small amounts of data with the server behind the scenes. This enables a more seamless and
                                    responsive user experience, as portions of a webpage can be updated without requiring a full page reload. AJAX is
                                    commonly used in modern web applications to enhance interactivity and reduce perceived loading times.
                                </p>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

/* google font inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

.faq-main-wrapper{
    --font-family:'Inter', sans-serif;
    --faq-main-bg-color:#F5F6FE;
    --faq-bg-color:#EBEDFC;
    --font-color:#2d2d2d;
    margin-top: 20px;
    padding-block:90px;
    background-color:#bebcbc;
}
.faq-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
}
.faq-tabs{
    width: 30%;
    display: flex;
    justify-content: center;
}
.faq-holder{
    width: 60%;
}
.faq-tab-buttons-holder{
    background-color: var(--faq-bg-color);
    display: grid;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 15px;
    min-width: 265px;
}
.faq-tab-buttons{
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px
}
.faq-tab-buttons li .faq-tab-btn{
    outline: none;
    border: none;
    padding-block: 10px;
    font-family: var(--font-family);
    color: var(--font-color);
    font-weight: 400;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    background-color: transparent;
    /* background-color: transparent; */
    transition: 0.2s linear;
    text-align: start;
    width: 190px;
    padding-left: 25px;
}
.faq-tab-buttons li .faq-tab-btn:hover{
    background-color: #fff;
}
.faq-tab-buttons li .faq-tab-btn.tab-active{
    background-color: #fff;
}
.faq-tab-btn span{
    margin-right: 6px;
}
.faq-main{
    background-color: var(--faq-main-bg-color);
    border-radius: 20px;
    padding: 20px;
    
}
.faq-accordion-holder{
    overflow: hidden;
    max-height: 53px;
    transition: all 0.2s linear;
}
.faq-accord-title button{
    display: flex;
    justify-content: space-between;
    width: 100%;
    border: none;
    padding-block: 15px;
    padding-inline: 0;
    background-color: transparent;
    font-size: 20px;
    cursor: pointer;
    outline: none;
    text-align: start;
    color:#000;
}
.faq-title-text,
.faq-title-icon{
    display: block;
}
.faq-title-icon.icon-flip i{
    transition: 0.4s;
}
.faq-inner p{
    margin: 0;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
}



@media only screen and (max-width:480px){
    .faq-main-wrapper{
    padding-inline:13px;
    }
    .faq-tabs,
    .faq-holder{
        width: 100%;
    }
    .faq-container{
        gap: 40px;
    }
    .faq-tab-buttons-holder{
        width: 100%;
    }
    .faq-tab-buttons{
        flex-direction: row;
    }
    .faq-tab-buttons li .faq-tab-btn{
        width: 100%;
        padding-inline: 15px;
        font-size: 14px;
        cursor: default;
    }
    .faq-accord-title button{
        font-size: 18px;
        cursor: default;
    }
}

JS

let faqButtons = document.querySelectorAll('.faq-accord-title button')
let faqHolderSingle = document.querySelector('.faq-accordion-holder')


// Accordion switch Buttons 
let AccordSwitchButtons = document.querySelectorAll('.faq-tab-btn');
let FaqMain = document.querySelectorAll('.faq-wrap');

AccordSwitchButtons.forEach((switchButtons, n) => {
    console.log(n);
    switchButtons.addEventListener('click', (e) => {
        
        console.log(switchButtons);
        console.log(e.target);
        let switchButtons__ = switchButtons.getAttribute('Faq-data-value');
        
        let TabButtons = document.querySelector('.tab-active').classList.remove('tab-active');
        let AddClassInTabButtons = e.target.classList.add('tab-active')

        FaqMain.forEach((eachFaqMain)  => {
            let FaqMain__ = eachFaqMain.getAttribute('Faq-data-value')
           

            eachFaqMain.style.display = 'none';

            if(switchButtons__ === FaqMain__){
                eachFaqMain.style.display = 'block';
            }
        })


    })
});




//Accord Button click function 
faqButtons.forEach(faqBtn =>{
    faqBtn.addEventListener('click', (e) => {
        let faqholder = e.target.closest('.faq-accordion-holder');
        let all = document.querySelectorAll('.faq-accordion-holder');
        let faqInnerContentHeight = faqholder.querySelector('.faq-inner').getBoundingClientRect().height;
        let faqtitle = faqholder.querySelector('.faq-accord-title').getBoundingClientRect().height;
        let fh = faqInnerContentHeight + faqtitle;
        let btnIcon = e.target.parentElement.querySelector('i');
        
        console.log(btnIcon)
        btnIcon.style.cssText = 'transform: rotate(180deg);'

        all.forEach(element => {
            element.style.cssText = `max-height:${faqtitle}px`;
            if (window.innerWidth < 480){
                // let accordTitle = element.querySelector('faq-accord-title').getBoundingClientRect.width;
                // console.log(accordTitle)
                element.style.cssText = `max-height:${faqtitle}px`;
                // console.log(window.innerWidth)
                // element.style.cssText = `height:53px;`;
                // console.log('not working')
            }
        });
        
        
        faqholder.style.cssText = `max-height:${fh}px; border-bottom: 1px solid #00000070; padding-bottom: 20px;`;
        
    })
})

Links

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- google font is been imported in style.css file *top -->