JS અથવા CSS વિના સામગ્રી છુપાવવા અને જાહેર કરવા માટે માત્ર HTML-એકોર્ડિયન બનાવો

શું તમે જાણો છો કે એકોર્ડિયન બનાવવા માટે એક નેટીવ 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;
}

વર્તણૂક

સેટિંગ વર્તણૂકો ખૂબ જ મર્યાદિત છે, ત્યાં ખરેખર માત્ર એક જ વસ્તુ છે જે તમે કરી શકો છો અને તે છે પ્રગટ ટેક્સ્ટ બનાવવાનું મૂળભૂત રીતે ખોલો.

એકોર્ડિયનને તેની ખુલ્લી સ્થિતિમાં શરૂ કરવા માટે, બુલિયન ઉમેરો ઓપન માટે લક્ષણ ટ tagગ:

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

વધારે વાચો

સામગ્રી છુપાવવા અને જાહેર કરવા માટે આ મૂળ HTML5 એકોર્ડિયન છે. ખૂબ સરસ, અધિકાર?

હું કયા લક્ષણોનો ઉપયોગ કરી શકું?

નીચેના લક્ષણો માટે ઉપયોગ કરી શકાય છે ટ tagગ:

એટ્રીબ્યુટ	ભાવ	સારાંશ
ઓપન	ઓપન	ડિફોલ્ટ છે ખુલ્લું નથી.
id	કિંમત	અનન્ય ઓળખકર્તા પ્રદાન કરે છે.
વર્ગ	વર્ગનામો	તત્વને વર્ગના નામ અસાઇન કરે છે.
શૈલી	CSS-મૂલ્યો	તત્વને CSS શૈલીઓ અસાઇન કરે છે.

તો શું મર્યાદાઓ છે? ત્યાં હંમેશા એક કેચ છે, તે નથી?

ઇન્ટરનેટ એક્સપ્લોરર માટે કોઈ સપોર્ટ નથી

આ HTML5-માત્ર એકોર્ડિયન ઇન્ટરનેટ એક્સપ્લોરરના કોઈપણ સંસ્કરણમાં કામ કરશે નહીં. જો તમારે તેને IE11 ને સપોર્ટ કરવું હોય તો તમારે JQuery નો ઉપયોગ કરીને અલગ ફોલબેક સોલ્યુશનનો ઉપયોગ કરવો પડશે. અન્ય તમામ બ્રાઉઝર સપોર્ટ કરે છે અને .

કોઈ કસ્ટમાઇઝ્ડ એનિમેશન અથવા સંક્રમણો નથી

જ્યારે તમે દેખાવને સંશોધિત અને સ્ટાઇલ કરી શકો છો (ઉપર બતાવ્યા પ્રમાણે), તમે કોઈપણ ટેક્સ્ટ રીવીલ એનિમેશન અથવા સંક્રમણો કરી શકશો નહીં. જો તમે તે કરવા માંગતા હોવ તો તમારે બીજા CSS/JSS એકોર્ડિયન સોલ્યુશનની જરૂર પડશે.

સ્ક્રીન રીડર્સ અને ઍક્સેસિબિલિટી

આ દેશી છે HTML5 અને તે *સુલભ* હોવું જોઈએ પરંતુ જાણવા મળ્યું છે કે વાસ્તવિક જાહેર કરેલ ટેક્સ્ટ હંમેશા સ્ક્રીન રીડર દ્વારા યોગ્ય રીતે જાહેર કરવામાં આવતું નથી.

સંદર્ભ:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
• https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element
• https://caniuse.com/details
• https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/