צור אקורדיון HTML -> הסתר וחשוף תוכן ללא JS/CSS

האם ידעת שיש פתרון HTML5 מקורי ליצור בקלות רבה כפתור קריאה יותר/פחות אקורדיון כדי להסתיר ולחשוף תוכן איתו ללא JavaScript או CSS. המשך לקרוא כדי לגלות כיצד.

אל האני ו תגי HTML5 הם באופן רשמי א רכיב יישומון גילוי, אבל זיווג עם תגי HTML5 יתנו לך א אקורדיון טהור ב-HTML בלבד.

משמעות ללא JS או CSS נחוץ. כמה מגניב זה!

הנה דוגמה המציגה אלמנט פשוט עם a ו .

הנה הקוד:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

וכך זה יראה:

למידע נוסף

זהו אקורדיון HTML5 מקורי להסתרה וחשיפה של תוכן. די מגניב, נכון?

איך זה עובד? אל האני תג משמש כעטיפה לאלמנט הניתן לפתיחה או סגירה. המשתמש צריך ללחוץ על התווית שהיא תג כדי לפתוח או לסגור את האלמנט.

מה לגבי סטיילינג והתנהגות?

סגנונות

אתה יכול להחיל סגנון CSS כדי להתאים אישית את המראה של תיבת הטקסט החשוף. להלן סגנון ממשק עם כרטיסיות:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

כברירת מחדל, הסמן מופיע כמו חץ, אבל אם אתה רוצה שהוא יהיה א מצביע יד במקום זאת, השתמש בזה:

details {
cursor: pointer;
}

התנהגויות

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

כדי להפעיל את האקורדיון במצב פתוח, הוסף את הבולאני לפתוח תכונה ל תג:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

למידע נוסף

זהו אקורדיון HTML5 מקורי להסתרה וחשיפה של תוכן. די מגניב, נכון?

באילו תכונות אני יכול להשתמש?

ניתן להשתמש בתכונות שלהלן עבור תג:

תְכוּנָה	ערך	<br> סיכום
לפתוח	לפתוח	ברירת המחדל היא לא פתוח.
id	ערך	מספק מזהה ייחודי.
בכיתה	שמות כיתות	מקצה שמות מחלקות לאלמנט.
סגנון	ערכי CSS	מקצה סגנונות CSS לאלמנט.

אז מהן המגבלות? תמיד יש מלכוד, לא?

אין תמיכה ב-Internet Explorer

אקורדיון HTML5 בלבד זה לא יעבוד באף גרסה של Internet Explorer. אם אתה צריך שהוא יתמוך ב-IE11, תצטרך להשתמש בפתרון חלופי אחר באמצעות JQuery. כל שאר הדפדפנים תומכים ו .

אין אנימציות או מעברים מותאמים אישית

בעוד שאתה יכול לשנות ולעצב את המראה (כפי שמוצג לעיל), לא תוכל לבצע אנימציות או מעברים לחשוף טקסט. אם אתה רוצה לעשות את זה תצטרך עוד פתרון אקורדיון CSS/JSS.

קוראי מסך ונגישות

זה יליד HTML5 וזה *צריך להיות* נגיש אבל נמצא שהטקסט שנחשף בפועל לא תמיד מוכרז כהלכה על ידי קורא מסך.

הפניות:

אודות המחבר

מאט אהלגרן

מתיאס אהלגרן הוא המנכ"ל והמייסד של Website Rating, ניהול צוות עולמי של עורכים וכותבים. בעל תואר שני במדעי מידע וניהול. הקריירה שלו עברה לקידום אתרים לאחר התנסויות מוקדמות בפיתוח אתרים במהלך האוניברסיטה. עם למעלה מ-15 שנים בקידום אתרים, שיווק דיגיטלי ופיתוח אתרים. המיקוד שלו כולל גם אבטחת אתרים, המעידה על תעודה באבטחת סייבר. מומחיות מגוונת זו עומדת בבסיס המנהיגות שלו ב Website Rating.