JS അല്ലെങ്കിൽ CSS ഇല്ലാതെ ഉള്ളടക്കം മറയ്‌ക്കാനും വെളിപ്പെടുത്താനും ഒരു HTML-മാത്രം അക്കോഡിയൻ സൃഷ്‌ടിക്കുക

ഉള്ളടക്കം മറയ്‌ക്കാനും വെളിപ്പെടുത്താനും വളരെ എളുപ്പത്തിൽ ഒരു അക്കോഡിയൻ റീഡ് കൂടുതൽ/കുറവ് ബട്ടൺ സൃഷ്‌ടിക്കാൻ ഒരു നേറ്റീവ് HTML5 പരിഹാരമുണ്ടെന്ന് നിങ്ങൾക്കറിയാമോ JavaScript അല്ലെങ്കിൽ CSS ഇല്ല. എങ്ങനെയെന്നറിയാൻ തുടർന്ന് വായിക്കുക.

html5 അക്രോഡിയൻ

ദി ഒപ്പം 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 കൂടാതെ ഇത് ആക്സസ് ചെയ്യാവുന്നതായിരിക്കണം, എന്നാൽ യഥാർത്ഥ വെളിപ്പെടുത്തിയ വാചകം എല്ലായ്പ്പോഴും ഒരു സ്ക്രീൻ റീഡർ ശരിയായി പ്രഖ്യാപിക്കുന്നില്ലെന്ന് കണ്ടെത്തി.

അവലംബം:

Mathias Ahlgren ആണ് സിഇഒയും സ്ഥാപകനും Website Rating, എഡിറ്റർമാരുടെയും എഴുത്തുകാരുടെയും ഒരു ആഗോള ടീമിനെ നയിക്കുക. ഇൻഫർമേഷൻ സയൻസിലും മാനേജ്മെന്റിലും ബിരുദാനന്തര ബിരുദം നേടിയിട്ടുണ്ട്. സർവ്വകലാശാലയിലെ ആദ്യകാല വെബ് ഡെവലപ്‌മെന്റ് അനുഭവങ്ങൾക്ക് ശേഷം അദ്ദേഹത്തിന്റെ കരിയർ എസ്‌ഇ‌ഒയിലേക്ക് തിരിയുകയായിരുന്നു. എസ്‌ഇഒ, ഡിജിറ്റൽ മാർക്കറ്റിംഗ്, വെബ് ഡെവലപ്‌മെൻ എന്നിവയിൽ 15 വർഷത്തിലേറെയായി. സൈബർ സെക്യൂരിറ്റിയിലെ സർട്ടിഫിക്കറ്റ് തെളിയിക്കുന്ന വെബ്‌സൈറ്റ് സുരക്ഷയും അദ്ദേഹത്തിന്റെ ശ്രദ്ധയിൽ ഉൾപ്പെടുന്നു. ഈ വൈവിധ്യമാർന്ന വൈദഗ്ധ്യം അദ്ദേഹത്തിന്റെ നേതൃത്വത്തിന് അടിവരയിടുന്നു Website Rating.

ബന്ധപ്പെട്ട പോസ്റ്റുകൾ

വീട് » വിഭവങ്ങളും ഉപകരണങ്ങളും » JS അല്ലെങ്കിൽ CSS ഇല്ലാതെ ഉള്ളടക്കം മറയ്‌ക്കാനും വെളിപ്പെടുത്താനും ഒരു HTML-മാത്രം അക്കോഡിയൻ സൃഷ്‌ടിക്കുക

അറിഞ്ഞിരിക്കുക! ഞങ്ങളുടെ വാർത്താക്കുറിപ്പിൽ ചേരുക
ഇപ്പോൾ സബ്‌സ്‌ക്രൈബുചെയ്യുക, വരിക്കാർക്ക് മാത്രമുള്ള ഗൈഡുകൾ, ടൂളുകൾ, ഉറവിടങ്ങൾ എന്നിവയിലേക്ക് സൗജന്യ ആക്‌സസ് നേടുക.
നിങ്ങൾക്ക് എപ്പോൾ വേണമെങ്കിലും അൺസബ്‌സ്‌ക്രൈബ് ചെയ്യാം. നിങ്ങളുടെ ഡാറ്റ സുരക്ഷിതമാണ്.
അറിഞ്ഞിരിക്കുക! ഞങ്ങളുടെ വാർത്താക്കുറിപ്പിൽ ചേരുക
ഇപ്പോൾ സബ്‌സ്‌ക്രൈബുചെയ്യുക, വരിക്കാർക്ക് മാത്രമുള്ള ഗൈഡുകൾ, ടൂളുകൾ, ഉറവിടങ്ങൾ എന്നിവയിലേക്ക് സൗജന്യ ആക്‌സസ് നേടുക.
നിങ്ങൾക്ക് എപ്പോൾ വേണമെങ്കിലും അൺസബ്‌സ്‌ക്രൈബ് ചെയ്യാം. നിങ്ങളുടെ ഡാറ്റ സുരക്ഷിതമാണ്.
അറിഞ്ഞിരിക്കുക! ഞങ്ങളുടെ വാർത്താക്കുറിപ്പിൽ ചേരൂ!
ഇപ്പോൾ സബ്‌സ്‌ക്രൈബുചെയ്യുക, വരിക്കാർക്ക് മാത്രമുള്ള ഗൈഡുകൾ, ടൂളുകൾ, ഉറവിടങ്ങൾ എന്നിവയിലേക്ക് സൗജന്യ ആക്‌സസ് നേടുക.
കാലികമായി തുടരുക! ഞങ്ങളുടെ വാർത്താക്കുറിപ്പിൽ ചേരുക
നിങ്ങൾക്ക് എപ്പോൾ വേണമെങ്കിലും അൺസബ്‌സ്‌ക്രൈബ് ചെയ്യാം. നിങ്ങളുടെ ഡാറ്റ സുരക്ഷിതമാണ്.
എന്റെ കമ്പനി
കാലികമായി തുടരുക! ഞങ്ങളുടെ വാർത്താക്കുറിപ്പിൽ ചേരുക
🙌 നിങ്ങൾ (ഏതാണ്ട്) വരിക്കാരായിരിക്കുന്നു!
നിങ്ങളുടെ ഇമെയിൽ ഇൻബോക്സിലേക്ക് പോകുക, നിങ്ങളുടെ ഇമെയിൽ വിലാസം സ്ഥിരീകരിക്കാൻ ഞാൻ നിങ്ങൾക്ക് അയച്ച ഇമെയിൽ തുറക്കുക.
എന്റെ കമ്പനി
നിങ്ങൾ സബ്‌സ്‌ക്രൈബ് ചെയ്‌തു!
നിങ്ങളുടെ സബ്‌സ്‌ക്രിപ്‌ഷന് നന്ദി. എല്ലാ തിങ്കളാഴ്ചയും ഉൾക്കാഴ്ചയുള്ള ഡാറ്റ സഹിതം ഞങ്ങൾ വാർത്താക്കുറിപ്പ് അയയ്ക്കുന്നു.
ഇതിലേക്ക് പങ്കിടുക...