طراحی آکاردئون شگفت‌ انگیز با قابلیت باز و بسته شدن خودکار

<!-- Accordion Auto Code by RayaWp.ir -->
<div class="Accordion-RayaWp" style="--dynamic-transition: 12000ms;">
    <div class="Accordion-RayaWp__header">
        <span class="icon icon-star-1 pl-2"></span>
        <span class="icon icon-star pl-2"></span>
        <h3>مانیتورینگ و نظارت امنیتی ۲۴ ساعته در ۷ روز هفته</h3>
    </div>
    <div class="Accordion-RayaWp__body">
        <p>ما در ایران سرور با استفاده از جدیدترین تکنولوژی‌های نظارتی، به‌صورت 24 ساعته در 7 روز هفته از امنیت سرورها و شبکه شما محافظت می‌کنیم. با شناسایی و رفع سریع تهدیدات احتمالی، آرامش خاطر شما را تضمین می‌کنیم تا بدون نگرانی از امنیت، به رشد کسب‌وکارتان بپردازید.</p>
    </div>
</div>

<div class="Accordion-RayaWp" style="--dynamic-transition: 15000ms;">
    <div class="Accordion-RayaWp__header">
        <span class="icon icon-star-1 pl-2"></span>
        <span class="icon icon-star pl-2"></span>
        <h3>مدیریت پیشرفته تهدیدات و رویدادهای امنیتی (SIEM)</h3>
    </div>
    <div class="Accordion-RayaWp__body">
        <p>با استفاده از سیستم‌های هوشمند SEIM در ایران‌سرور، تمامی رویدادهای امنیتی شما به‌صورت متمرکز تحلیل و مدیریت می‌شوند. با استفاده از این سیستم‌ها، تهدیدات پیچیده را به موقع شناسایی می‌کنیم و مانع آن‌ها می‌شویم. ضمن اینکه با ترکیب تحلیل‌های خودکار و انسانی، امنیت کسب‌وکار شما را در برابر هر نوع حمله تضمین می‌کنیم.</p>
    </div>
</div>

<div class="Accordion-RayaWp" style="--dynamic-transition: 12000ms;">
    <div class="Accordion-RayaWp__header">
        <span class="icon icon-star-1 pl-2"></span>
        <span class="icon icon-star pl-2"></span>
        <h3>آزمایشات منظم امنیتی و شناسایی آسیب‌پذیری‌ها</h3>
    </div>
    <div class="Accordion-RayaWp__body">
        <p>در ایران‌سرور برای جلوگیری از نفوذ تهدیدات سایبری، شناسایی و رفع آسیب‌پذیری‌ها، تیم امنیتی ما به‌صورت دوره‌ای آزمایش‌های پیشرفته‌ای همچون اسکن آسیب‌پذیری‌ها و تست نفوذ (Penetration Testing) را انجام می‌دهند. با این آزمایشات به‌دقت تمامی نقاط ضعف سیستم‌های شما را شناسایی می‌کنیم و راهکارهایی برای تقویت امنیت پیشنهاد می‌کنیم.</p>
    </div>
</div>

<div class="Accordion-RayaWp" style="--dynamic-transition: 12000ms;">
    <div class="Accordion-RayaWp__header">
        <span class="icon icon-star-1 pl-2"></span>
        <span class="icon icon-star pl-2"></span>
        <h3>فایروال قدرتمند و WAF پیشرفته برای مقابله با حملات مخرب</h3>
    </div>
    <div class="Accordion-RayaWp__body">
        <p>ما با فایروال‌های چند لایه و سیستم‌های محافظتی پیشرفته، ترافیک وبسایت شما را به‌صورت هوشمند بررسی می‌کنیم. این سیستم‌ها به‌طور خودکار هرگونه ترافیک مخرب و حملات مختلف را مسدود کرده و از داده‌های حیاتی شما محافظت می‌کنند. با WAF پیشرفته ایران‌سرور، هیچ تهدیدی از دیوارهای امنیتی شما عبور نخواهد کرد.</p>
    </div>
</div>

/* Accordion styles by RayaWp.ir */
.Accordion-RayaWp {
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}

.Accordion-RayaWp::after {
    content: "";
    background: linear-gradient(-270deg, #2635D9 0%, #fff 100%);
    width: 100%;
    height: 0.25rem;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    transform: translateX(100%);
}

.Accordion-RayaWp.active::after {
    width: 100%;
    right: 0;
    transform: translateX(0);
    transition: transform var(--dynamic-transition, 3000ms) cubic-bezier(.05,.15,.5,1);
}

.Accordion-RayaWp:not(.active)::after {
    transform: translateX(100%) !important;
}

.Accordion-RayaWp__header {
    display: flex;
    cursor: pointer;
    align-items: center;
    color: #62636a;
    transition: color 0.3s ease;
    gap: 0.75rem;
}

.Accordion-RayaWp__header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #62636a;
    white-space: nowrap;
}

.Accordion-RayaWp__body {
    display: none;
    color: #62636a;
    padding-top: 1rem;
    line-height: 2rem;
    overflow: hidden;
}

.Accordion-RayaWp.active .Accordion-RayaWp__body {
    display: block;
}

.Accordion-RayaWp.active {
    box-shadow: 0 0.25rem 1.5rem 0 rgba(37, 51, 203, 0.08);
    border-radius: 0.5rem;
}

.Accordion-RayaWp.active .Accordion-RayaWp__header h3 {
    color: #323234;
}

.Accordion-RayaWp__header .icon-star {
    display: none;
    font-size: 1.5rem;
    color: #2635D9;
}

.Accordion-RayaWp__header .icon-star-1 {
    display: inline-block;
    font-size: 1.5rem;
    color: #62636a;
}

.Accordion-RayaWp.active .icon-star {
    display: inline-block;
}

.Accordion-RayaWp.active .icon-star-1 {
    display: none;
}

.Accordion-RayaWp.active .icon-star {
    display: flex;
    color: #2635D9;
}

.Accordion-RayaWp.active .icon-star-1 {
    display: none;
}

@media (max-width: 575.98px) {
    .Accordion-RayaWp .icon-star {
        display: none !important;
    }
}

<script>
jQuery(document).ready(function ($) {
    const duration = 12000; // مدت زمان انیمیشن
    let index = 0;
    const tabs = $(".Accordion-RayaWp__header"); // تغییر به تب‌ها

    const activateFirstTab = () => {
        const firstTab = $(tabs[0]);
        const parentCard = firstTab.closest(".Accordion-RayaWp");
        parentCard.addClass("active");
        parentCard.find(".Accordion-RayaWp__body").slideDown();
        setTimeout(activateNextTab, duration);
    };

    const deactivateCurrentTab = () => {
        const currentTab = $(tabs[index]);
        const parentCard = currentTab.closest(".Accordion-RayaWp");
        parentCard.removeClass("active");
        parentCard.find(".Accordion-RayaWp__body").slideUp();
    };

    const activateNextTab = () => {
        deactivateCurrentTab();
        index = (index + 1) % tabs.length; // حرکت به تب بعدی
        const nextTab = $(tabs[index]);
        const parentCard = nextTab.closest(".Accordion-RayaWp");
        parentCard.addClass("active");
        parentCard.find(".Accordion-RayaWp__body").slideDown();
        setTimeout(activateNextTab, duration); // Set timeout for next tab activation
    };

    activateFirstTab();

    const checkSectionInView = () => {
        const section = $(".Accordion-RayaWp"); // بخش آکاردئون
        const sectionLocation = section[0].getBoundingClientRect();
        const windowHeight = window.innerHeight;
        if (sectionLocation.top <= windowHeight && sectionLocation.bottom >= 0) {
            activateFirstTab();
            window.removeEventListener("scroll", checkSectionInView);
        }
    };

    window.addEventListener("scroll", checkSectionInView);

    $(".Accordion-RayaWp__header").on("click", function () {
        let parent = $(this).closest(".Accordion-RayaWp");

        index = $(tabs).index(this);

        if (!parent.hasClass("active")) {
            $(".Accordion-RayaWp").removeClass("active");
            $(".Accordion-RayaWp__body").slideUp();

            parent.addClass("active");
            parent.find(".Accordion-RayaWp__body").slideDown();
        } else {
            parent.removeClass("active");
            parent.find(".Accordion-RayaWp__body").slideUp();
        }
    });
});
</script>