ایجاد آکاردئون HTML -> پنهان کردن و آشکار کردن محتوا بدون JS/CSS

آیا می‌دانستید که یک راه‌حل بومی HTML5 وجود دارد که می‌تواند به راحتی یک دکمه آکاردئون خواندن بیشتر/کمتر برای مخفی کردن و آشکار کردن محتوا ایجاد کند. بدون جاوا اسکریپت یا CSS. ادامه مطلب را بخوانید تا بدانید چگونه.

La و تگ های 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 برای پنهان کردن و آشکار کردن محتوا است. خیلی باحاله، درسته؟

چگونه کار می کند؟ La تگ به عنوان یک پوشش برای یک عنصر عمل می کند که می تواند باز یا بسته شود. کاربر باید روی برچسبی که همان است کلیک کند برای باز یا بستن عنصر تگ کنید.

در مورد استایل و رفتار چطور؟

سبک

برای سفارشی کردن ظاهر کادر متن آشکار، می‌توانید از استایل 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;
}

رفتار

تنظیم رفتارها بسیار محدود است، واقعاً تنها یک کار وجود دارد که می توانید انجام دهید و آن ساخت متن آشکار شده است به صورت پیش فرض باز شود.

برای شروع آکاردئون در حالت باز، Boolean را اضافه کنید باز کن نسبت به برچسب:

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

ادامه مطلب

این یک آکاردئون بومی HTML5 برای پنهان کردن و آشکار کردن محتوا است. خیلی باحاله، درسته؟

از چه ویژگی هایی می توانم استفاده کنم؟

از ویژگی های زیر می توان برای برچسب:

صفت	ارزش	خلاصه
باز کن	باز کن	پیش فرض است باز نیست.
id	ارزش	یک شناسه منحصر به فرد ارائه می دهد.
کلاس	نام کلاس ها	نام کلاس ها را به عنصر اختصاص می دهد.
سبک	مقادیر CSS	استایل های CSS را به عنصر اختصاص می دهد.

پس محدودیت ها چیست؟ همیشه گیرایی هست، اینطور نیست؟

بدون پشتیبانی از اینترنت اکسپلورر

این آکاردئون فقط HTML5 در هیچ نسخه ای از اینترنت اکسپلورر کار نمی کند. اگر مجبور به پشتیبانی از IE11 هستید، باید از راه حل جایگزین دیگری با استفاده از JQuery استفاده کنید. همه مرورگرهای دیگر پشتیبانی می کنند و .

بدون انیمیشن یا انتقال سفارشی

در حالی که می توانید ظاهر را تغییر دهید و استایل دهید (همانطور که در بالا نشان داده شده است)، نمی توانید هیچ انیمیشن یا انتقال متنی را انجام دهید. اگر می خواهید این کار را انجام دهید، به راه حل آکاردئون CSS/JSS دیگری نیاز دارید.