Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main style="">
    <h1>Free Accessibility OpenSource code</h1>
    <p>if you want to upgrade this OSC project, please contact me at ben@benjo.co.il</p>
  <p> :) have a nice day</p>
  <p style="max-width: 550px; float: left; direction: rtl; text-align: right;">חברים לכבוד חוק הנגישות הכנתי לכם סקין לרכיב נגישות במתנה, אני יודע שלפעמים במהלך פרויקט אין הרבה זמן לבזבז על עבודת HTML CSS "שחורה" :) ו-עיצוב, אז לפעמים משקיעים יותר בתכנות JS ופחות בשאר, אני לא אומר שזה פאר היצירה אבל זה סקין פשוט שמאגד התחלה של אוסף של המנגונונים הבסיסיים כדי להתחיל לתכנת פונקציות ב-JS כדי לחבר אליו ולפרויקט, זה אמור לרצות בעיקר את הלקוח שלכם. העיצוב הוא נקי ובסיסי כדי גם להתאים לנגישות וגם כדי להישאר יחסית ניטרלי כי בכל זאת תוסף נגישות לרוב הוא תמיד "תוסף" תוספת של משהו שלא בטוח שתכננו להוסיף לפרויקט.
מקווה שיצא לכם להשתמש בו , בהמשך אני יכניס בו גם פונקציות פשוטות ב-JS כדי שיעבוד ומי שרוצה להצטרף שיעשה fork.</p>
    
    <div class="freeAcc-component">
        <button title="לפתיחת תפריט נגישות" class="freeAcc-openButton freeAcc-ButtonType-A freeAcc-RTL" aria-selected="true">
            <svg version="1.1" id="freeAccEyeSVG" aria-hidden="true" class="freeAcc-openButton-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                <path d="M48.7,24.3C48.3,23.9,41,16.1,31,13.7L33,9c0.2-0.5,0-1.2-0.5-1.4c-0.5-0.2-1.2,0-1.4,0.6l-2.2,5.1C27.6,13.1,26.4,13,25,13 C12,13,1.7,23.9,1.3,24.3c-0.4,0.4-0.4,1.1,0,1.5C1.7,26.1,9,33.9,19,36.3L17,41c-0.2,0.5,0,1.2,0.5,1.4c0.1,0.1,0.3,0.1,0.4,0.1 c0.4,0,0.8-0.2,1-0.6l2.2-5.1c1.3,0.2,2.5,0.3,3.9,0.3c0.4,0,0.7,0,1.1,0l0,0l0,0c12.5-0.6,22.2-10.9,22.7-11.3 C49.1,25.3,49.1,24.7,48.7,24.3z M34.2,33l5.6-13.2c1,0.6,1.9,1.2,2.7,1.8l-3.9,9.2C37.2,31.7,35.8,32.4,34.2,33z M27.7,34.8 l7.4-17.4c1,0.4,1.9,0.9,2.8,1.4L31.5,34C30.3,34.3,29,34.6,27.7,34.8z M3.6,25c2.5-2.4,11.3-9.9,21.4-9.9c1,0,2,0.1,3,0.2l-0.8,1.9 c-0.7-0.2-1.4-0.3-2.2-0.3c-4.5,0-8.1,3.7-8.1,8.2c0,3,1.6,5.6,3.9,7l-1,2.3C12,32.5,5.7,27,3.6,25z M22,34.7l8.1-19.1 c1,0.2,2.1,0.6,3.1,0.9l-7.8,18.3c-0.1,0-0.2,0-0.4,0C24,34.9,23,34.9,22,34.7z M41.7,28.9l2.5-5.8c1,0.8,1.7,1.5,2.2,2 C45.6,25.8,43.9,27.3,41.7,28.9z"></path>
            </svg><span>נגישות</span></button>
        <div class="freeAcc-inner freeAccOpen" aria-expanded="true" aria-label="ברוכים הבאים לרכיב הנגישות" tabindex="0">
            <div class="freeAcc-header-container freeAcc-bg-color">
                <div class="freeAcc-welcomeYou">
                    <svg version="1.1" id="freeAccEyeSVG" aria-hidden="true" class="freeAcc-openButton-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                        <path d="M48.7,24.3C48.3,23.9,41,16.1,31,13.7L33,9c0.2-0.5,0-1.2-0.5-1.4c-0.5-0.2-1.2,0-1.4,0.6l-2.2,5.1C27.6,13.1,26.4,13,25,13 C12,13,1.7,23.9,1.3,24.3c-0.4,0.4-0.4,1.1,0,1.5C1.7,26.1,9,33.9,19,36.3L17,41c-0.2,0.5,0,1.2,0.5,1.4c0.1,0.1,0.3,0.1,0.4,0.1 c0.4,0,0.8-0.2,1-0.6l2.2-5.1c1.3,0.2,2.5,0.3,3.9,0.3c0.4,0,0.7,0,1.1,0l0,0l0,0c12.5-0.6,22.2-10.9,22.7-11.3 C49.1,25.3,49.1,24.7,48.7,24.3z M34.2,33l5.6-13.2c1,0.6,1.9,1.2,2.7,1.8l-3.9,9.2C37.2,31.7,35.8,32.4,34.2,33z M27.7,34.8 l7.4-17.4c1,0.4,1.9,0.9,2.8,1.4L31.5,34C30.3,34.3,29,34.6,27.7,34.8z M3.6,25c2.5-2.4,11.3-9.9,21.4-9.9c1,0,2,0.1,3,0.2l-0.8,1.9 c-0.7-0.2-1.4-0.3-2.2-0.3c-4.5,0-8.1,3.7-8.1,8.2c0,3,1.6,5.6,3.9,7l-1,2.3C12,32.5,5.7,27,3.6,25z M22,34.7l8.1-19.1 c1,0.2,2.1,0.6,3.1,0.9l-7.8,18.3c-0.1,0-0.2,0-0.4,0C24,34.9,23,34.9,22,34.7z M41.7,28.9l2.5-5.8c1,0.8,1.7,1.5,2.2,2 C45.6,25.8,43.9,27.3,41.7,28.9z"></path>
                    </svg><span>נגישות אתרים</span></div>
                <button class="freeAcc-closeButton freeAcc-ButtonType-B freeAcc-RTL" title="סוגר תפריט נגישות"><span aria-hidden="true">×</span> סגור</button>
            </div>
            <div class="freeAcc-menu" role="navigation">
                <ul role="menu" aria-label="תפריט שינוי גודל גופן" class="freeAcc-menuTypeA">
                    <li role="menuitem">
                        <button class="freeAcc-bigText freeAcc-ButtonType-C" title="מגדיל את הטקסט בעמוד">
                            <svg version="1.1" id="freeAccBigTextSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <polygon points="42.4,0.8 34.7,6.8 37,8.6 40.2,6 40.2,13 44.5,13 44.5,6 47.8,8.6 50,6.8 "></polygon>
                                    <polygon points="42.4,33.2 50,27.3 47.8,25.6 44.5,28.1 44.5,21.2 40.2,21.2 40.2,28.1 37,25.6 34.7,27.3 "></polygon>
                                    <path d="M30.1,33.2H23L10.7,15.8c-1.9,1-3,3.1-3.4,6.2L6,33.2H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,1h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1L22.1,1h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.2z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">הגדלת טקסט</span></button>
                    </li>
                    <li role="menuitem" class="freeAcc-borderStyle">
                        <button class="freeAcc-smallText freeAcc-ButtonType-C" title="מקטין את הטקסט בעמוד">
                            <svg version="1.1" id="freeAccSmallTextSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <polygon points="42.4,14.9 50,8.9 47.8,7.2 44.5,9.7 44.5,2.8 40.2,2.8 40.2,9.7 37,7.2 34.7,8.9 "></polygon>
                                    <polygon points="42.4,19.1 34.7,25 37,26.7 40.2,24.2 40.2,31.1 44.5,31.1 44.5,24.2 47.8,26.7 50,25 "></polygon>
                                    <path d="M30.1,33.1H23L10.7,15.7c-1.9,1-3,3.1-3.4,6.2L6,33.1H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,0.9h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1l0.8-6.5h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.1z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">הקטנת טקסט</span></button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-disableText freeAcc-ButtonType-C" title="מאפס גודל טקסט לגודל המקורי">
                            <svg version="1.1" id="freeAccTextDefultSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <polygon points="42.4,19.9 50,13.9 47.8,12.2 44.5,14.7 44.5,7.8 40.2,7.8 40.2,14.7 37,12.2 34.7,13.9 "></polygon>
                                    <polygon points="42.4,14.1 34.7,20 37,21.7 40.2,19.2 40.2,26.1 44.5,26.1 44.5,19.2 47.8,21.7 50,20 "></polygon>
                                    <path d="M30.1,33.1H23L10.7,15.7c-1.9,1-3,3.1-3.4,6.2L6,33.1H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,0.9h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1l0.8-6.5h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.1z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">איפוס טקסט</span></button>
                    </li>
                </ul>
                <ul role="menu" aria-label="תפריט שינוי צבע רקע" class="freeAcc-menuTypeA">
                    <li role="menuitem">
                        <button class="freeAcc-darkContrast freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצורך התאמה לניגודיות כהה">
                            <svg version="1.1" id="freeAccDarkColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                                <g id="_x31_4_3_">
                                    <path d="M49,24.6c-0.1-0.2-2.7-3.8-7-7.4c-2.5-2.2-5.1-3.9-7.6-5.1C31.2,10.5,28,9.7,25,9.7c-3.1,0-6.2,0.8-9.4,2.4 c-2.5,1.2-5.1,3-7.6,5.1c-4.2,3.7-6.9,7.3-7,7.4c-0.2,0.2-0.2,0.5,0,0.8c0.1,0.2,2.7,3.8,7,7.4c2.5,2.2,5.1,3.9,7.6,5.1 c3.2,1.6,6.4,2.4,9.4,2.4c3.1,0,6.2-0.8,9.4-2.4c2.5-1.2,5.1-3,7.6-5.1c4.2-3.7,6.9-7.3,7-7.4C49.1,25.2,49.1,24.8,49,24.6z M25,16 c4.9,0,9,4,9,9s-4,9-9,9s-9-4-9-9S20.1,16,25,16z"></path>
                                    <circle cx="25" cy="25" r="4"></circle>
                                </g>
                            </svg><span class="freeAcc-spanType-A">ניגודיות כהה</span></button>
                    </li>
                    <li role="menuitem" class="freeAcc-borderStyle">
                        <button class="freeAcc-brightContrast freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצורך התאמה לניגודיות בהירה">
                            <svg version="1.1" id="freeAccBrightColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <path d="M49.4,16.4c-0.1-0.2-2.7-3.9-7.1-7.6C40,6.8,37.4,5,34.6,3.6c-3.3-1.6-6.5-2.5-9.6-2.5c-3.2,0-6.3,0.8-9.6,2.5 C12.6,5,10,6.8,7.7,8.8c-1.7,1.5-4.3,4-6.9,7.3l-0.1,0.1c-0.4,0.4-0.4,0.9-0.1,1.4c0.1,0.2,2.8,3.9,7.1,7.6c2.4,2.2,5,3.9,7.7,5.2 c3.3,1.6,6.5,2.5,9.6,2.5c3.2,0,6.3-0.8,9.6-2.4c2.4-1.2,5-2.9,7.7-5.2c1.7-1.5,4.3-4,6.9-7.3l0.2-0.2 C49.6,17.3,49.6,16.7,49.4,16.4z M48.6,17.1c0,0-0.1,0.1-0.1,0.1c-2.6,3.2-5.1,5.7-6.8,7.2c-2.6,2.2-5.2,3.9-7.5,5 C31,31,28,31.8,25,31.8c-3,0-6.1-0.8-9.2-2.4c-2.6-1.2-5.1-2.9-7.5-5c-4.1-3.4-6.7-6.9-6.9-7.3C1.4,17,1.3,17,1.4,17 c0,0,0.1-0.1,0.2-0.2c2.6-3.2,5.1-5.7,6.8-7.2c2.3-2,4.8-3.7,7.5-5.1C19,2.9,22,2.1,25,2.1c3,0,6.1,0.8,9.2,2.3 c2.7,1.4,5.2,3.1,7.5,5.1c4.1,3.4,6.6,6.8,6.9,7.2C48.6,16.9,48.6,17.1,48.6,17.1z"></path>
                                    <path d="M25,7.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S30.2,7.5,25,7.5z M25,25.5c-4.7,0-8.5-3.8-8.5-8.5 c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5C33.5,21.7,29.7,25.5,25,25.5z"></path>
                                    <path d="M25,12.5c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5s4.5-2,4.5-4.5S27.5,12.5,25,12.5z M25,20.5c-1.9,0-3.5-1.6-3.5-3.5 s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S26.9,20.5,25,20.5z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">ניגודיות בהירה</span></button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-bigText freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצבעי ברירת המחדל">
                            <svg version="1.1" id="freeAccDefultColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                                <path d="M49.9,24.6c-0.1-0.2-2.8-3.9-7.2-7.7c-1.4-1.2-2.9-2.3-4.3-3.3l6.5-6.5l-2-2l-7,7c-0.4-0.2-0.7-0.4-1.1-0.6 c-3.3-1.6-6.6-2.4-9.8-2.4s-6.5,0.8-9.8,2.4c-2.6,1.3-5.3,3.1-7.9,5.3c-4.4,3.8-7.1,7.6-7.2,7.7c-0.2,0.2-0.2,0.6,0,0.8 c0.1,0.2,2.8,3.9,7.2,7.7c1.4,1.2,2.9,2.3,4.3,3.3l-6.5,6.5l2,2l7-7c0.4,0.2,0.7,0.4,1.1,0.6c3.3,1.6,6.6,2.4,9.8,2.4 s6.5-0.8,9.8-2.4c2.6-1.3,5.3-3.1,7.9-5.3c4.4-3.8,7.1-7.6,7.2-7.7C50,25.2,50,24.8,49.9,24.6z M15.7,25c0-5.1,4.2-9.3,9.3-9.3 c2.1,0,4,0.7,5.5,1.8l-3.8,3.8c-0.5-0.3-1.1-0.4-1.8-0.4c-2.3,0-4.1,1.8-4.1,4.1c0,0.6,0.2,1.2,0.4,1.8l-3.8,3.8 C16.4,29,15.7,27.1,15.7,25z M25,34.3c-2.1,0-4-0.7-5.5-1.8l3.8-3.8c0.5,0.3,1.1,0.4,1.8,0.4c2.3,0,4.1-1.8,4.1-4.1 c0-0.6-0.2-1.2-0.4-1.8l3.8-3.8c1.1,1.5,1.8,3.5,1.8,5.5C34.3,30.1,30.1,34.3,25,34.3z"></path>
                            </svg><span class="freeAcc-spanType-A">איפוס ניגודיות</span></button>
                    </li>
                </ul>
                <ul role="menu" aria-label="תפריט שינויים נוספים" class="freeAcc-menuTypeB">
                    <li role="menuitem">
                        <button class="freeAcc-boldHeadline freeAcc-ButtonType-D">הדגשת כותרות</button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-boldLinks freeAcc-ButtonType-D">הדגשת קישורים</button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-bigText freeAcc-ButtonType-D">שנה לגופן נגיש/קריא</button>
                    </li>
                </ul>
                <div class="freeAccCredit-container">
                    <ul role="menu" aria-label="תפריט משוב והצהרת נגישות" class="freeAcc-menuTypeC">
                        <li role="menuitem">
                            <button class="freeAcc-DisableAll freeAcc-ButtonType-F">בטל/אפס נגישות</button>
                        </li>
                        <li role="menuitem">
                            <button class="freeAcc-goToAccPage freeAcc-ButtonType-E">הצהרת נגישות<span class="freeAcc-iconFloat" aria-hidden="true">»</span></button>
                        </li>
                        <li role="menuitem">
                            <button class="freeAcc-reportProblem freeAcc-ButtonType-E">דווח על בעיית נגישות<span class="freeAcc-iconFloat" aria-hidden="true">»</span></button>
                        </li>
                    </ul><a href="https://codepen.io/benjokoren/pen/QqyYaR" class="freeAcc-credit">Accessibility OpenSource</a></div>
            </div>
        </div>
    </div>
    <main>
              
            
!

CSS

              
                /* start of component style RTL */
main {
  direction: rtl;
}
h1, p {
  text-align: left;
  font-family: arial;
}

.freeAcc-component a, .freeAcc-component button, .freeAcc-component a:hover, .freeAcc-component button:hover, .freeAcc-component a:focus, .freeAcc-component button:focus, button[class^="freeAcc"], button[class^="freeAcc"]:hover, button[class^="freeAcc"]:focus, span.freeAccBtnName, .freeAcc-component span, .freeAcc-component svg {
    transition: all .3s ease-in;
}

.freeAcc-component button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    margin: 0px;
    padding: 0px;   
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

button.freeAcc-ButtonType-A {
    background-color: #000;
}

.freeAcc-bg-color {
    background-color: #000;
}

button.freeAcc-openButton {
    font-size: 24px;
    color: #fff;
    padding: 3px 15px;
    line-height: 100%;
    position: fixed;
    z-index: 2147483645;
    right: 0;
    top: 0;
}

button.freeAcc-openButton:focus {
    outline: 2px solid red;
}

button.freeAcc-openButton svg {
    width: 26px;
    fill: #fff;
    margin-left: 6px;
}

button.freeAcc-openButton:hover > span, button.freeAcc-openButton:hover > svg, button.freeAcc-openButton:focus > span, button.freeAcc-openButton:focus > svg {
    color: #fff900;
    fill: #fff900;
}


button.freeAcc-ButtonType-D {
    background-color: #dedede;
    font-size: 20px;
    width: 100%;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    border: 1px solid #cecece;
    border-radius: 3px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.65);
}

button.freeAcc-closeButton {
    color: #ffffff;
    font-size: 18px;
    padding: 1px 10px;
    line-height: 27px;
    float: left;
}

button.freeAcc-closeButton span {
    font-size: 26px;
    position: relative;
    top: 4px;
}

.freeAcc-header-container {
    width: 300px;
    position: absolute;
    left: 0px;
    top: 0px;
    min-height: 33px;
}

.freeAcc-menu {
    width: 300px;
}

button.freeAcc-openButton span {
    position: relative;
    top: -5px;
}

img.freeAcc-openButton-img {
    width: 30px;
}

.freeAcc-welcomeYou {
    color: #ffffff;
    font-size: 18px;
    padding: 1px 10px;
    line-height: 27px;
    float: right;
}

.freeAcc-welcomeYou svg {
    width: 26px;
    fill: #fff;
    position: relative;
    margin-left: 5px;
    top: 3px;
}

.freeAcc-welcomeYou span {
    display: inline-block;
    position: relative;
    top: -4px;
}

.freeAcc-welcomeYou img {
    position: relative;
    top: -1px;
}

.freeAcc-inner {
    width: 0px;
    height: 100%;
    padding: 45px 0px;
    background-color: #f9f9f9;
    border: 2px solid #000000;
    text-align: center;
    position: fixed;
    right: 0;
    top: 0;
    box-sizing: border-box;
    box-shadow: 5px 0px 15px 0px rgba(0,0,0,0.75);
    z-index: 2147483647;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.freeAccOpen {
    width: 300px;
    opacity: 1;
}

.freeAcc-component {
    font-family: arial;
}

ul.freeAcc-menuTypeA {
    margin: 0px;
    padding: 0px 0px 5px 0px;
    list-style: none;
    display: inline-block;
    border-bottom: 1px solid #c0c0c0;
    width: 90%;
}
ul.freeAcc-menuTypeB {
    margin: 0px;
    padding: 0px 0px 5px 0px;
    list-style: none;
    display: inline-block;
    width: 90%;
}

ul.freeAcc-menuTypeA li {
    padding: 5px 0px;
    margin: 4px;
    float: right;
}

button.freeAcc-ButtonType-C {
    padding: 5px;
}

.freeAcc-ButtonType-C svg {
    width: 50px;
    height: 40px;
}

li.freeAcc-borderStyle {
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
}

img.freeAcc-img {
    width: 40px;
}

span.freeAcc-spanType-A {
    font-size: 12px;
    display: block;
}

span.freeAcc-spanType-A {
    font-size: 13px;
    display: block;
}

.freeAcc-RTL {
    text-align: right;
    direction: rtl;
}

.freeAccCredit-container {
    position: absolute;
    bottom: 0;
    width: 300px;
    padding: 0px;
}

ul.freeAcc-menuTypeC {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    width: 100%;
}

button.freeAcc-DisableAll {
    width: 100%;
    background-color: #ff3737;
    color: #fff;
    font-size: 20px;
    padding: 10px;
    position: relative;
    z-index: 1;
}

button.freeAcc-DisableAll:hover, button.freeAcc-DisableAll:focus {
    outline: 3px solid #000;
    background-color: #ba0000;
}

button.freeAcc-ButtonType-E {
    text-align: right;
    width: 100%;
    padding: 10px 15px;
    border-bottom: 2px solid #000;
    font-size: 16px;
    background-color: #fff;
    position: relative;
}

button.freeAcc-ButtonType-E:hover, button.freeAcc-ButtonType-E:focus {
    background-color: #353535;
    color: #fff;
    outline: 3px solid #000;
}

span.freeAcc-iconFloat {
    position: absolute;
    left: 10px;
    top: 9px;
    background-color: #000;
    color: #fff;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 50px;
    font-size: 24px;
    line-height: 22px;
}

a.freeAcc-credit {
    display: block;
    width: 100%;
    background-color: #000;
    margin: 0px;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 14px;
}

a.freeAcc-credit:hover {
    text-decoration: underline;
    color: #fff900;
}

button.freeAcc-ButtonType-B:hover {
    color: #fff900;
}

button.freeAcc-ButtonType-B:focus {
    outline: 3px dotted #fff;
    color: #fff900;
}

button.freeAcc-ButtonType-C:hover {
    background-color: #eeeeee;
    outline: 1px solid #cccccc;
}

button.freeAcc-ButtonType-C:focus {
    outline: 3px dotted #000;
    background-color: #eeeeee;
}

button.freeAcc-ButtonType-D:hover {
    background-color: #fff;
}

button.freeAcc-ButtonType-D:focus {
    outline: 3px solid #000;
    background-color: #fff;
}


/* end of component style RTL */

/* start of costume elments add to site */

span.freeAccBtnName {
    overflow: hidden;
    width: 0px;
    height: 20px;
    display: block;
    position: absolute;
    padding: 0;
    top: 6px;
    left: 29px;
    background-color: #000;
    z-index: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 100;
    line-height: 14px;
    border-radius: 0px 10px 10px 0px;
    opacity: 0;
}

span.freeAccBtnName.freeAccShow {
    padding: 3px 10px;
    width: 100px;
    opacity: 1;
}

svg#freeAccShowSVG, svg#freeAccHideSVG {
    width: 23px;
}

svg#freeAccStopSVG {
    width: 12px;
}

svg#freeAccPlaySVG {
    width: 12px;
    left: 3px;
}

button.freeAccBtnStyle:hover > svg.freeAccSVG, button.freeAccBtnStyle:focus > svg.freeAccSVG{
    fill: #fff900;
}

button.freeAccBtnStyle {
    position: absolute;
    z-index: 1;
    background-color: #000;
    border: 0px;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    padding: 0px;
    margin: 0px;
}

button.freeAccBtnStyle:hover, button.freeAccBtnStyle:focus {
    color: #fff900;
}

button.freeAccVideo {
    left: 15px;
    bottom: 15px;
}

button.freeAccSlider {
    left: 15px;
    top: 0px;
}

button.freeAccLogoSlider {
    left: 15px;
    top: -75px;
}

button.freeAccTeamSlider {
    left: 15px;
    top: -76px;
}

svg.freeAccSVG {
    fill: #fff;
    transition: all 0.5s ease-in-out;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}


/* this website spasific costum changes after acc mode */

ul.freeAccSliderReplace1, ul.freeAccLogoSliderReplace {
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 1120px;
    margin: 0px auto;
}

ul.freeAccTeamSliderReplace {
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1120px;
    margin: 0px auto;
    
}


ul.freeAccSliderReplace1 li, ul.freeAccLogoSliderReplace li {
    max-width: 280px;
    padding: 0px 15px 15px 0px;
}

ul.freeAccSliderReplace1 li img {
    width: 100%;
}

ul.freeAccSliderReplace1 li h3 {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    line-height: 30px;
    color: #000;
    font-size: 22px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

ul.freeAccSliderReplace1 li p {
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

ul.freeAccTeamSliderReplace > li > .member h3, ul.freeAccTeamSliderReplace > li > .member > .bottomember, ul.freeAccTeamSliderReplace > li > .member h4 {
    opacity: 1;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

ul.freeAccTeamSliderReplace > li > .member h3 {
    font-size: 18px;
}

ul.freeAccTeamSliderReplace > li > .member h4 {
    font-size: 16px;
}


@media screen and (max-width: 670px) {
    button.freeAccVideo {
        display: none;
    }
    
    ul.freeAccSliderReplace1 {
        width: 300px;
    }
    
    button.freeAccSlider {
        left: 45px;
        top: -50px;
        z-index: 2;
        
    }
    
    button.freeAccLogoSlider {
        left: -15px;
    }
}
              
            
!

JS

              
                $(document).on('click', ".freeAcc-openButton", function() {
    $(".freeAcc-inner").toggleClass("freeAccOpen").attr('aria-expanded', 'true').attr('tabindex', '0');;
    $(this).attr('aria-selected', 'true');
});

$(document).on('click', ".freeAcc-closeButton", function() {
    $(".freeAcc-inner").toggleClass("freeAccOpen").attr('aria-expanded', 'false').attr('tabindex', '-1');
    $(".freeAcc-openButton").attr('aria-selected', 'false');
});
              
            
!
999px

Console