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

in સંસાધનો અને સાધનો

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

વર્તણૂક

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

એકોર્ડિયનને તેની ખુલ્લી સ્થિતિમાં શરૂ કરવા માટે, બુલિયન ઉમેરો ઓપન માટે લક્ષણ ટ 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 અને તે *સુલભ* હોવું જોઈએ પરંતુ જાણવા મળ્યું છે કે વાસ્તવિક જાહેર કરેલ ટેક્સ્ટ હંમેશા સ્ક્રીન રીડર દ્વારા યોગ્ય રીતે જાહેર કરવામાં આવતું નથી.

સંદર્ભ:

મેથિયાસ એહલગ્રેન ના સીઈઓ અને સ્થાપક છે Website Rating, સંપાદકો અને લેખકોની વૈશ્વિક ટીમનું સંચાલન. તેમણે ઇન્ફોર્મેશન સાયન્સ અને મેનેજમેન્ટમાં માસ્ટર્સ કર્યું છે. યુનિવર્સિટી દરમિયાન વેબ ડેવલપમેન્ટના પ્રારંભિક અનુભવો પછી તેમની કારકિર્દી એસઇઓ તરફ દોરી ગઈ. SEO, ડિજિટલ માર્કેટિંગ અને વેબ ડેવલપમેન્ટમાં 15 વર્ષથી વધુ સાથે. તેના ફોકસમાં વેબસાઈટ સુરક્ષાનો પણ સમાવેશ થાય છે, જે સાયબર સિક્યોરિટીમાં પ્રમાણપત્ર દ્વારા પુરાવા મળે છે. આ વૈવિધ્યસભર નિપુણતા તેમના નેતૃત્વ પર આધાર રાખે છે Website Rating.

માહિતગાર રહો! અમારા ન્યૂઝલેટરમાં જોડાઓ
હમણાં સબ્સ્ક્રાઇબ કરો અને સબ્સ્ક્રાઇબર-માત્ર માર્ગદર્શિકાઓ, સાધનો અને સંસાધનોની મફત ઍક્સેસ મેળવો.
તમે કોઈપણ સમયે અનસબ્સ્ક્રાઇબ કરી શકો છો. તમારો ડેટા સુરક્ષિત છે.
માહિતગાર રહો! અમારા ન્યૂઝલેટરમાં જોડાઓ
હમણાં સબ્સ્ક્રાઇબ કરો અને સબ્સ્ક્રાઇબર-માત્ર માર્ગદર્શિકાઓ, સાધનો અને સંસાધનોની મફત ઍક્સેસ મેળવો.
તમે કોઈપણ સમયે અનસબ્સ્ક્રાઇબ કરી શકો છો. તમારો ડેટા સુરક્ષિત છે.
આના પર શેર કરો...