ਕੀ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਸਮੱਗਰੀ ਨੂੰ ਛੁਪਾਉਣ ਅਤੇ ਪ੍ਰਗਟ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਆਸਾਨੀ ਨਾਲ ਇੱਕ ਐਕੋਰਡਿਅਨ ਰੀਡ ਮੋਰ/ਘੱਟ ਬਟਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮੂਲ HTML5 ਹੱਲ ਹੈ ਕੋਈ JavaScript ਜਾਂ CSS ਨਹੀਂ. ਇਹ ਜਾਣਨ ਲਈ ਪੜ੍ਹੋ ਕਿ ਕਿਵੇਂ।
The ਅਤੇ 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 ਐਕੋਰਡਿਅਨ ਹੈ। ਬਹੁਤ ਵਧੀਆ, ਸੱਜਾ?
ਇਸ ਨੂੰ ਕੰਮ ਕਰਦਾ ਹੈ? The ਟੈਗ ਇੱਕ ਤੱਤ ਲਈ ਇੱਕ ਰੈਪਰ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਖੋਲ੍ਹਿਆ ਜਾਂ ਬੰਦ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਉਪਭੋਗਤਾ ਨੂੰ ਉਸ ਲੇਬਲ 'ਤੇ ਕਲਿੱਕ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਜੋ ਹੈ ਤੱਤ ਨੂੰ ਖੋਲ੍ਹਣ ਜਾਂ ਬੰਦ ਕਰਨ ਲਈ ਟੈਗ ਕਰੋ।
ਸ਼ੈਲੀ ਅਤੇ ਵਿਹਾਰ ਬਾਰੇ ਕੀ?
Styles
ਤੁਸੀਂ ਪ੍ਰਗਟ ਟੈਕਸਟ ਬਾਕਸ ਦੀ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ 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;
}ਵਿਵਹਾਰ
ਵਿਵਹਾਰ ਨੂੰ ਸੈੱਟ ਕਰਨਾ ਬਹੁਤ ਸੀਮਤ ਹੈ, ਇੱਥੇ ਅਸਲ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਚੀਜ਼ ਹੈ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹ ਹੈ ਪ੍ਰਗਟ ਟੈਕਸਟ ਬਣਾਉਣਾ ਮੂਲ ਰੂਪ ਵਿੱਚ ਖੋਲ੍ਹੋ.
ਏਕੋਰਡਿਅਨ ਨੂੰ ਇਸਦੇ ਖੁੱਲੇ ਰਾਜ ਵਿੱਚ ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਬੁਲੀਅਨ ਨੂੰ ਜੋੜੋ ਓਪਨ ਨੂੰ ਗੁਣ ਟੈਗ:
<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 ਐਕੌਰਡਿਅਨ ਹੱਲ ਦੀ ਲੋੜ ਪਵੇਗੀ।
ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ
ਇਹ ਦੇਸੀ ਹੈ HTML5 ਅਤੇ ਇਹ *ਪਹੁੰਚਯੋਗ* ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਪਰ ਇਹ ਪਾਇਆ ਗਿਆ ਹੈ ਕਿ ਅਸਲ ਪ੍ਰਗਟ ਕੀਤੇ ਟੈਕਸਟ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੁਆਰਾ ਹਮੇਸ਼ਾ ਸਹੀ ਢੰਗ ਨਾਲ ਘੋਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਹਵਾਲੇ:
