ഉള്ളടക്കം മറയ്ക്കാനും വെളിപ്പെടുത്താനും വളരെ എളുപ്പത്തിൽ ഒരു അക്കോഡിയൻ റീഡ് കൂടുതൽ/കുറവ് ബട്ടൺ സൃഷ്ടിക്കാൻ ഒരു നേറ്റീവ് 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;
}
സ്ഥിരസ്ഥിതിയായി, കഴ്സർ ഒരു അമ്പടയാളം പോലെയാണ് ദൃശ്യമാകുന്നത്, എന്നാൽ നിങ്ങൾക്കത് വേണമെങ്കിൽ a കൈ ചൂണ്ടുന്നു പകരം ഇത് ഉപയോഗിക്കുക:
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 അക്കോഡിയൻ ആണിത്. നല്ല രസമാണ്, അല്ലേ?
എനിക്ക് എന്ത് ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കാം?
താഴെയുള്ള ആട്രിബ്യൂട്ടുകൾ ഇതിനായി ഉപയോഗിക്കാം ടാഗ്:
ഗുണങ്ങളെ | വില | ചുരുക്കം |
---|---|---|
തുറക്കുക | തുറക്കുക | സ്ഥിരസ്ഥിതി പൊട്ടിച്ചില്ല. |
id | മൂല്യം | ഒരു അദ്വിതീയ ഐഡന്റിഫയർ നൽകുന്നു. |
ക്ലാസ് | ക്ലാസ് നാമങ്ങൾ | ഘടകത്തിന് ക്ലാസ് നാമങ്ങൾ നൽകുന്നു. |
ശൈലി | CSS-മൂല്യങ്ങൾ | മൂലകത്തിന് CSS ശൈലികൾ നൽകുന്നു. |
അപ്പോൾ എന്താണ് പരിമിതികൾ? എപ്പോഴും ഒരു ക്യാച്ച് ഉണ്ട്, അല്ലേ?
Internet Explorer-ന് പിന്തുണയില്ല
ഈ HTML5-മാത്രം അക്കോഡിയൻ Internet Explorer-ന്റെ ഒരു പതിപ്പിലും പ്രവർത്തിക്കില്ല. നിങ്ങൾക്ക് ഇത് IE11 പിന്തുണ നൽകണമെങ്കിൽ JQuery ഉപയോഗിച്ച് മറ്റൊരു ഫാൾബാക്ക് സൊല്യൂഷൻ ഉപയോഗിക്കേണ്ടി വരും. മറ്റെല്ലാ ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു ഒപ്പം .
ഇഷ്ടാനുസൃതമാക്കിയ ആനിമേഷനുകളോ സംക്രമണങ്ങളോ ഇല്ല
നിങ്ങൾക്ക് രൂപഭാവം (മുകളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ) പരിഷ്ക്കരിക്കുന്നതിനും സ്റ്റൈൽ ചെയ്യുന്നതിനും കഴിയുമെങ്കിലും, നിങ്ങൾക്ക് ടെക്സ്റ്റ് വെളിപ്പെടുത്തുന്ന ആനിമേഷനുകളോ സംക്രമണങ്ങളോ ഒന്നും ചെയ്യാൻ കഴിയില്ല. നിങ്ങൾക്കത് ചെയ്യണമെങ്കിൽ മറ്റൊരു CSS/JSS അക്കോഡിയൻ പരിഹാരം ആവശ്യമാണ്.
സ്ക്രീൻ റീഡറുകളും പ്രവേശനക്ഷമതയും
ഇത് സ്വദേശിയാണ് HTML5 കൂടാതെ ഇത് ആക്സസ് ചെയ്യാവുന്നതായിരിക്കണം, എന്നാൽ യഥാർത്ഥ വെളിപ്പെടുത്തിയ വാചകം എല്ലായ്പ്പോഴും ഒരു സ്ക്രീൻ റീഡർ ശരിയായി പ്രഖ്യാപിക്കുന്നില്ലെന്ന് കണ്ടെത്തി.
അവലംബം: