ACCORDIAN

HTML
<accordion>
                    <div class="accordion-container">
                                                    <div class="set">
                                <a href="javascript:void(0)" class="">
                                    How much does website design cost?                                 </a>
                                <div class="content" style="display: none;">
                                    <div class="paragraph"><p>The cost of website design can vary depending on several factors, including the complexity of the website, the amount of custom design work required, and the experience and location of the designer. Generally, affordable website design services can range from a few hundred to several thousand dollars.</p>
</div>
                                </div>
                            </div>
                                                    <div class="set">
                                <a href="javascript:void(0)" class="">
                                    What should I look for in a website design service?                                 </a>
                                <div class="content" style="display: none;">
                                    <div class="paragraph"><p>When looking for a cheap website design service or affordable website designing company USA, it’s important to consider their experience, portfolio, and process. Look for a designer or agency that has experience designing websites in your industry or niche, and ask to see examples of their work. Make sure their process aligns with your goals and timeline and that they are transparent about their pricing and communication.</p>
</div>
                                </div>
                            </div>
                                                    <div class="set">
                                <a href="javascript:void(0)" class="">
                                    How can website design help differentiate our brand from competitors?                                 </a>
                                <div class="content" style="display: none;">
                                    <div class="paragraph"><p>By using unique and affordable web design elements that reflect your brand identity, your USA website design company can help differentiate your brand from competitors. A website that stands out and offers a memorable user experience can help establish your brand as a leader in your industry and increase brand recognition.</p>
</div>
                                </div>
                            </div>
                                                    <div class="set">
                                <a href="javascript:void(0)" class="">
                                    Which company is best for affordable web design services?                                 </a>
                                <div class="content" style="display: none;">
                                    <div class="paragraph"><p>When looking for a website development company or an affordable web designer, consider hiring a company with experience designing websites that align with your brand identity and values. Look for a cheap custom web design agency USA that offers personalized services and takes the time to understand your brand’s unique needs and goals. Our affordable web designing company specializes in creating affordable custom website designs tailored to each client’s brand and message. With our expertise in affordable web site development and our commitment to delivering high-quality, brand-centered solutions, we can help elevate your online presence and bring your brand to life.</p>
</div>
                                </div>
                            </div>
                        
                    </div>

                </accordion>


CSS

/* ----------------------------Accordion sec-----------------------*/

.accordion-container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 20px auto;
}

.accordion-container>h2 {
    text-align: center;
    color: #fff;
    padding-bottom: 5px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

.set {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
}

.set>a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.set>a.active {
    /* background-color: #3399cc; */
    color: #000;
    margin-left: 65px;
}

.set>a:before {
    background: url(images/arrow1.png) no-repeat;
    float: right;
    content: "";
    height: 8px;
    margin: 6px 0 0;
    width: 15px;
}

.set>a.active:before {
    filter: invert(100%);
    transform: rotate(180deg);
}

.accordion-container .content {
    position: relative;
    width: 100%;
    height: auto;
    /* background-color: #fff; */
    /* border-bottom: 1px solid #ddd; */
    display: none;
}

.accordion-container .content p {
    padding: 10px 15px;
    margin: 0;
    color: #333;
}
/* own faq sty  */
.faq-section .set {
    background: #630f7b;
    border-radius: 10px;
    margin: 0 0 20px;
    box-shadow: 0 0 0px 1px #c600ff;
}
.faq-section .set a {
    border: unset;
    font-size: 20px;
    line-height: normal;
    padding-left: 20px;
    padding-top: 25px;
    padding-bottom: 25px;
    font-weight: 600;
    color: var(--white-color);
    position: relative;
}
.faq-section .set a:after {
    content: '+';
    left: unset;
    right: 15px;
    position: absolute;
    background: var(--white-color);
    width: 30px;
    height: 30px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    color: #630f7b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    padding: 8px 0 0;
}
.faq-section .set>a.active {margin: 0;background: #630f7b;border-radius: 10px 10px 0px 0px;box-shadow: 0 0 10px #0000000f;}

.faq-section .content {
    border: unset;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 10px 10px #0000000f;
    padding-left: 10px;
    padding-bottom: 25px;
    margin: 0 0 20px;
    padding-right: 50px;
    background: #630f7b;
}
.faq-section .set>a.active:after {
    background: var(--white-color);
    color: #c600ff;
}
section.faq-section .gl-heading h2 {
    margin: 0 0 5px;
}

section.faq-section .para p {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;
}
.faq-section .content p {
    color: var(--white-color);
    font-size: 16px;
    font-weight: 400;
}