ساخت accordion با html و css و javascript

برای ساخت یک accordion شما نیاز دارید تا آشنایی نسبی با جاوااسکریپت ، سی اس اس و اچ تی ام ال داشته باشید ، در این مقاله آموزشی شما به راحتی میتوانید مطابق کد های زیر و طی کردن مراحل یک accordion برای وب سایت خود ایجاد کنید و با تغییر بخش css آن را شخصی سازی کنید.

این مقاله همچنین برای دوستانی که به تازگی شروع به برنامه نویسی کرداند و میخواهند دانش خود را با یک پروژه کوچک به چالش بکشند مناسب است.

بخش اول : ساخت فایل های مورد نیاز

شما ابتدا باید یک فولدر با نام assets ایجاد کنید و تصاویر خود را در آن قرار دهید سپس فایل های html و css و javascript خود را ایجاد کرده در این پروژه ما از نام های style.css برای css ، از index.html برای html و از script.js برای کد های جاوااسکریپت استفاده کردیم و سپس کد های هر بخش را در قسمت مربوطه قرار دهید.

بخش دوم : کد های html

برای یادگیری html می توانید در این بخش به صورت رایگان شروع به یادگیری html کنید. به صورت کلی میتوان گفت html یک زبان نشانه گذاری است که از آن برای ایجاد ساختار اولیه صفحات وب استفاده می شود. در کد های زیر که از سه بخش html ،header و body تشکیل شده است در بخش header عنوان ما قرار داده شده است و لینک دهی به style قرار دارد.

در بخش body که ساختار کلی پروژه ما در این بخش ایجاد می شود از چند تگ div تشکیل شده است و هر بخش شامل کلاس هایی می شود که در فایل css استایل دهی شده است. همچنین برای ایجاد متن خود از متن ساختگی استفاده کردایم.

<!DOCTYPE html>
<html>
<header>
    <title>topdemy.ir</title>
    <link rel="stylesheet" href="style.css">
</header>

<body>
    <div class="faq-container">
        <details>
            <summary>
                <span class="faq-title">
                    چگونه شروع به برنامه نویسی کنیم ؟
                </span>
                <img src="assets/plus.svg" class="expand-icon" />
            </summary>
            <div class="faq-content">
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و
                متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط
            </div>
        </details>
        <details>
            <summary>
                <span class="faq-title">
                    چگونه وارد بازار کار شویم ؟
                </span>
                <img src="assets/plus.svg" class="expand-icon" />
            </summary>
            <div class="faq-content">
                است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط
            </div>
        </details>
        <details>
            <summary>
                <span class="faq-title">
                    مسیر راه برنامه نویسی فرانت اند چیست ؟
                </span>
                <img src="assets/plus.svg" class="expand-icon" />
            </summary>
            <div class="faq-content">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان
                گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی
                تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه
                درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان
                امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
                حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
            </div>
        </details>
        <details>
            <summary>
                <span class="faq-title">
                    مسیر راه برنامه نویسی بک تند کدام است ؟ </span>
                <img src="assets/plus.svg" class="expand-icon" />
            </summary>
            <div class="faq-content">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان
                گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی
                تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه
                درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان
                امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
                حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
            </div>
        </details>
        <details>
            <summary>
                <span class="faq-title">درآمد برنامه نویسان چقدر است ؟</span>
                <img src="assets/plus.svg" class="expand-icon" />
            </summary>
            <div class="faq-content"> باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
                متخصصان را می طلبد، تا با نرم ا</div>
        </details>
    </div>

    <div class="topdemy">
        <img src="./assets/logo.png" width="220" height="100" alt="topdemy">
    </div>
    <script src="script.js"></script>
</body>

</html>

در انتهایی بخش تگ body فایل script خود را آدرس دهی میکنیم.

بخش سوم : کد های css

شما در بخش آموزش رایگان css می توانید شروع به یادگیری css کنید.

به صورت کلی میتوان گفت با کمک css می توانیم تگ های html ایجاد شده را با ساختار بهتر و زیباتر به نمایش در آوریم.

در این بخش کلاس های ایجاد شده در بخش html را استایل دهی کردایم .


html {
    font-size: 16px;
}

body {
    background: white;
    height: 100%;
}

* {
    box-sizing: border-box;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 13em;
    font-size: medium;
}

details {
    font-size: 20px;
    margin: 0 auto;
    width: 100%;
    background: #F6FAFF;
    border-radius: 8px;
    position: relative;
    max-width: 600px;
    border: 1px solid #C3DEFF;
    transition: all 0.3s ease-in-out;
}

details:hover {
    border: 1px solid #A4A1FF;
}

summary {
    user-select: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    list-style: none;
    padding: 1em;
    align-items: center;
}

summary:hover .faq-title {
    opacity: 1;
}

summary::-webkit-details-marker {
    display: none;
}

summary:focus {
    outline: none;
}

summary:hover .expand-icon {
    opacity: 1;
}

.faq-title {
    color: #1C2035;
    width: 90%;
    opacity: 0.65;
    transition: all 250ms ease-in-out;
}

.faq-content {
    color: #303651;
    padding: 0.2em 1em 1em 1em;
    font-weight: 500;
    line-height: 3;
    font-size: 15px;
}

.expand-icon {
    opacity: 0.65;
}

.expand-icon {
    pointer-events: none;
    position: absolute;
    right: 1em;
    transition: all 150ms ease-out;
}

.topdemy {
    margin-top: 80px;
    text-align: center;
}

بخش چهارم : کد های javascript

در این بخش شما می توانید به صورت رایگان شروع به یادگیری javascript کنید. به صورت کلی میتوان گفت جاوااسکریپت یک زبان برنامه نویسی محبوب برای سمت فرانت اند هست که به کمک آن می توان صفحات وب را پویا کرد.

در کد های زیر توابعی ایجاد کرده ایم که به کمک آن ها حالت کشویی برای باکس های خو ایجاد میکنیم و تصویر مثبت و منفی را تغییر می دهیم.

class Accordion {
    constructor(el) {
        this.el = el;
        this.summary = el.querySelector('summary');
        this.content = el.querySelector('.faq-content');
        this.expandIcon = this.summary.querySelector('.expand-icon')
        this.animation = null;
        this.isClosing = false;
        this.isExpanding = false;
        this.summary.addEventListener('click', (e) => this.onClick(e));
    }

    onClick(e) {
        e.preventDefault();
        this.el.style.overflow = 'hidden';

        if (this.isClosing || !this.el.open) {
            this.open();
        } else if (this.isExpanding || this.el.open) {
            this.shrink();
        }
    }

    shrink() {
        this.isClosing = true;

        const startHeight = `${this.el.offsetHeight}px`;
        const endHeight = `${this.summary.offsetHeight}px`;

        if (this.animation) {
            this.animation.cancel();
        }

        this.animation = this.el.animate({
            height: [startHeight, endHeight]
        }, {
            duration: 400,
            easing: 'ease-out'
        });

        this.animation.onfinish = () => {
            this.expandIcon.setAttribute('src', 'assets/plus.svg');
            return this.onAnimationFinish(false);
        }
        this.animation.oncancel = () => {
            this.expandIcon.setAttribute('src', 'assets/plus.svg');
            return this.isClosing = false;
        }
    }

    open() {
        this.el.style.height = `${this.el.offsetHeight}px`;
        this.el.open = true;
        window.requestAnimationFrame(() => this.expand());
    }

    expand() {
        this.isExpanding = true;

        const startHeight = `${this.el.offsetHeight}px`;
        const endHeight = `${this.summary.offsetHeight +
            this.content.offsetHeight}px`;

        if (this.animation) {
            this.animation.cancel();
        }

        this.animation = this.el.animate({
            height: [startHeight, endHeight]
        }, {
            duration: 350,
            easing: 'ease-out'
        });

        this.animation.onfinish = () => {
            this.expandIcon.setAttribute(
                'src',
                'assets/minus.svg'
            );
            return this.onAnimationFinish(true);
        }
        this.animation.oncancel = () => {
            this.expandIcon.setAttribute(
                'src',
                'assets/minus.svg'
            );
            return this.isExpanding = false;
        }
    }

    onAnimationFinish(open) {
        this.el.open = open;
        this.animation = null;
        this.isClosing = false;
        this.isExpanding = false;
        this.el.style.height = this.el.style.overflow = '';
    }
}

document.querySelectorAll('details').forEach((el) => {
    new Accordion(el);
});