شرح اضافة Accordion لموقعك باستخدام مكتبة UIKIT

شرحنا سابقا كيفية اضافة Accordion لموقعك ولكن كان الموضوع كانب مبنيا علي مكتبة بوتستراب الشهيرة ولكن مقالنا اليوم سيكون من خلال مكتبة UIKIT الذي تحدثنا عنها سابقا وعن اهم مميزاتها ، وبشكل عام هذه المكتبة تمتاز بالسرعة والسلاسة وتدعم الاتجاهات العربية RTL ، ولكن قبل الدخول في شرح اضافة الاكورديون يجب ان نقوم باضافة اكواد المكتبة اولا داخل موقعنا . 

شرح اضافة مكتبة UIKIT داخل موقعك

لكي نتمكن من استخدام اضافات هذه المكتبة يجب اضافة اكواد المكتبة داخل موقعك اولا ، وهي عملية تتم مرة واحدة فقط داخل موقعك بمعني انك تضعها في موقعك مرة واحدة وبعدها ستقدر علي استخدام كافة مميزات هذه المكتبة .

سنقوم باضافة هذا الكود اسفل وسم head داخل موقعك سواء كنت بلوجر او ووردبريس او اي منصة اخري

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

ثم نقوم بحفط الاعدادات وبهذه الطريقة قمنا باضافة اكواد المكتبة داخل موقعنا . سنذهب للجزء الثاني وهو اضافة اكواد البوتستراب .

في الصفحة او المقال الذي تريد وضع الاكورديون به قم باضافة هذا الكود :-

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">نص 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">نص 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">نص 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

بعد وضع هذا الكود داخل موقعك سيظهر لك الاكورديون مثل هذه الصورة تماما :-

يمكنك التعديل علي النصوص كيفما تشاء ، هذا كان موضوعا بسيطا ملخصا لـ شرح اضافة اكورديون لموقعك باستخدام مكتبة UIKIT اتمني ان يكون المقال أفادكم ولاتنسوا مشاركة المقال للافادة ولاتنسي الاطلاع علي شهادات الموقع واذا كان لديك أي استفسار اتركه في تعليق في صفحة الاسئلة او في هذه الصفحة وسأقوم بالرد عليك فورا .

المصدر لتعلم المزيد :- getuikit.com/docs/accordion