ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

הפיצ'ר המגניב של details ו-summary ב-HTML: הפתרון האוטומטי לאקורדיונים - מדריך מקיף עם טיפים ומידע שימושי

הפיצ'ר המגניב של details ו-summary ב-HTML: הפתרון האוטומטי לאקורדיונים

  1. בית
  2. >
  3. Full Stack
19 בספטמבר 2024• זמן קריאה: 1 דקות

רוצים ליצור אקורדיון בלי לגעת בקוד JavaScript? השתמשו ב-details ו-summary ב-HTML, פתרון אוטומטי ומגניב שהופך את החיים לקלים. למדו איך להוסיף אותו לעיצוב שלכם עם מינימום עבודה!

כי אין כמו פיסת css להרגיע את הנפש המיוסרת של עם הנצח שאמנם לא מפחד מדרך ארוכה אבל כואב לו כבר הרגליים... 😕😕😕 אז בפינתנו להיום שמוקדשת לזכר הצוררים אותנו וכל הנלווים אליהם .נראה דווקא אלמנט חמוד של html ולא css כהרגלנו, לחגוג את המאורע וגם כי כאלו אנחנו - חיים על הקצה.🤓 שם האלמנט הוא details ובנו היקר נקרא summary. בחייך מה אתה רוצה מאיתנו?😲 מכירים את זה שאתם רוצים לעשות "אקורדיון" או אלמנט נפתח? (או ליתר דיוק אתם *צריכים* לעשות אקורדיון אבל רוצים בכלל לעשות טרק בקוסטה ריקה.) אז אנחנו צריכים ליצור אלמנט להוסיף לו onClick להוסיף פונקציונליות וכן על זה הדרך? זה מה שבא האלמנט לעשות - וכמו בדוגמא בcodepen שיהיה בתגובות למטה- בברירת המחדל יראו רק את הsummary ובלחיצה עליו יראו גם את שאר האלמנט. יתרונות: 👍 עצלות. נגישות. חסרונות:👎 צריך להתעסק קצת להוסיף אנימציה. לא נתמך בדפדפנים ישנים.

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
27 באפריל 2025
Full Stack>>פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

בפוסט הזה נלמד על שימוש ב־mix-blend-mode ב־CSS, טכניקת עיצוב מגניבה שמאפשרת לשלב את התוכן של האלמנט עם הרקע והאב בצורה מרהיבה ומיוחדת.

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

@apply ב־Tailwind מאפשר לאחד מספר קלאסים לקלאס אחד, אבל יש לזה יתרונות וחסרונות. למדו איך להשתמש בזה בצורה חכמה ומתי כדאי להימנע.

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

למד איך להשתמש בצבעים ב־Tailwind CSS, כולל הצבעים המובנים, שמות אינטואיטיביים, וריאציות צבעים ודרכים להוסיף ולהתאים אישית את פלטת הצבעים בעזרת הקונפיגורציה.