अकॉर्डियन, फ़ाक, स्पॉइलर और अन्य ड्रॉप-डाउन विजेट

आप एक समझौते, faq, बिगाड़ने और डिव और जावास्क्रिप्ट का उपयोग कर बना सकते हैं।
लेकिन बेहतर: विवरण और सारांश

यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है और यह एक शब्दशः सही रूप में प्रारूपित कोड है, जिसके उपयोग के फायदे होंगे:

1. विकलांग लोगों के लिए आपकी साइट का उपयोग करना आसान होगा! उनका सॉफ्टवेयर (स्क्रीन रीडर और लाइक) html5 टैग को पूरी तरह से समझता है और उन्हें सही ढंग से प्रोसेस करेगा और कंटेंट के बारे में लोगों को सही-सही बताएगा।
2. पाठ की सुसंगतता में सुधार होगा, और खोज इंजन साइट को बेहतर ढंग से अनुक्रमित करने में सक्षम होंगे, क्योंकि वे बेहतर समझ पाएंगे कि दृश्य और छिपे हुए पाठ कैसे संबंधित हैं।
3. यह कीबोर्ड और अन्य उपकरणों से तत्वों को नियंत्रित करने के लिए उपलब्ध होगा।
4. लोड किए जाने वाले जावास्क्रिप्ट कोड की मात्रा कम हो जाती है, जिससे पेज लोडिंग गति, प्रसंस्करण गति और शुद्धता बढ़ जाती है।
5. लाइटहाउस, Google पेजस्पीड और इसी तरह के अन्य उपकरणों में प्रदर्शन में सुधार।
6. यह तब काम करता है जब जावास्क्रिप्ट को बंद कर दिया जाता है।

कम:

1. पुराने ब्राउज़र ऐसे टैग नहीं जानते हैं और जानकारी छिपाएंगे नहीं।

HTML:

<details> <summary>- </summary> <p>  —   </p> </details> <details open> <summary>-  2</summary> <p>        </p> </details> <details> <summary>-  3</summary> <p>  —   </p> </details> 

प्रदर्शन:


एक ओर, यह बहुत सुंदर नहीं दिखता है, दूसरी ओर यह तटस्थ है और आसानी से कई डिजाइनों में फिट हो सकता है। वैसे, विवरण टैग का डिफ़ॉल्ट दृश्य बहुत कुछ हैबर से स्पॉइलर के समान है, केवल आपको इसे थोड़ा सा पुनरावृत्ति करने की आवश्यकता है, इसे रेखांकित करें और जावास्क्रिप्ट और divs के बिना, शब्दशः सही करें, हैब्रोव्स्कलर।



दुर्भाग्य से, डिफ़ॉल्ट मार्कर में दो कमियां हैं:

1. पुराने ब्राउज़र इसे नहीं देखते हैं।
2. वेबकिट ब्राउज़र मार्कर चिह्न को बदलने की अनुमति नहीं देता है।

इस कारण से, डिफ़ॉल्ट मार्कर को छिपाना होगा और अपना खुद का बनाना होगा।


संशोधित पाठ मार्कर के साथ पहले विवरण / सारांश उदाहरण पर विचार करें:



सीएसएस:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; } summary:before { content: "+"; margin-right: .3em; } details[open] > summary:before { content: "–"; } summary ~ * { padding:0 1em 0 1em; } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } 

डिफ़ॉल्ट मार्करों के लिए हम प्रदर्शन करते हैं: कोई नहीं और हम सारांश के साथ विकल्प दिखाते हैं: {सामग्री: "+";} से पहले;

सारांश: फ़ोकस - बॉक्स-शैडो के साथ स्ट्रोक, यह कीबोर्ड के लिए आवश्यक है ताकि सक्रिय तत्व दिखाई दे और आप टैब की के साथ जा सकते हैं और एक स्थान के साथ खुल सकते हैं और बंद हो सकते हैं।

सारांश टैग के लिए, मैं डिस्प्ले सेट करता हूं: इनलाइन-ब्लॉक - ताकि यह पूरी चौड़ाई तक न खिंचे और केवल शब्द क्लिक करने योग्य हो, और पूरी लाइन न हो।

प्रदर्शन:


दाईं ओर पाठ मार्कर + सरल पाठ और मार्कर एनीमेशन:



सीएसएस:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; } summary:after { content: "+"; margin-left: .3em; display: inline-block; transition: transform .5s; } details[open] > summary:after { transform: scale(1,-1); } summary ~ * { padding:0 1em 0 1em; } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } details{ display:block; margin-bottom: .5rem; } 

नए उदाहरण में, मैं सारांश का उपयोग करता हूं: सारांश के बजाय मार्कर के लिए: पहले, ताकि यह दाईं ओर दिखाई दे।

ट्रांसफॉर्मर का उपयोग करके मार्कर एनीमेशन: स्केल (1, -1);

सारांश के बाद होने वाले सभी तत्वों के लिए, मैंने एनीमेशन का उपयोग करके एक चिकनी उपस्थिति के लिए एनीमेशन सेट किया है: स्वीप। 5 एस में आसानी से बाहर;

प्रदर्शन:


Svg मार्कर + रोटेशन एनीमेशन:



सीएसएस:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } / svg + xml; बेस 64, PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") नहीं दोहराने summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } 

सारांश: इससे पहले कि गंभीरता से फिर से किया जाना था:

1. स्थिति रखो: पूर्ण; बायाँ: .3em; शीर्ष: .4em; चौड़ाई: 1em; ऊंचाई: 1em;
2. टेक्स्ट मार्कर को रंग में सेट किया जाना चाहिए: पारदर्शी; अन्यथा यह दिखाई देगा।
3. हम पृष्ठभूमि का उपयोग करके चित्र लटकाते हैं।

1.5em को सारांश में पैडिंग-लेफ्ट इंडेंटेशन सेट करना भी आवश्यक है ताकि टेक्स्ट और आइकन एक-दूसरे को ओवरलैप न करें।

खैर, हम ट्रांसफॉर्म जोड़ते हैं: एरो के एक खूबसूरत मोड़ के लिए रोटेटज (90 डीजी)।

प्रदर्शन:


यदि हमें दाईं ओर svg आइकन की आवश्यकता है, तो हमें सारांश बदलने की आवश्यकता है: पहले और बाएं के बजाय दाएं डाल दिया।

सारांश के लिए पैडिंग-राइट: 1.5em;



सीएसएस:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } / svg + xml; बेस 64, PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") नहीं दोहराने summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } 

प्रदर्शन:


आइए अब एक समझौते बनाने के सबसे आम उदाहरणों में से एक बनाते हैं, जहाँ बाईं ओर एक आइकन होगा, पृष्ठभूमि, छाया, प्रभाव:



सीएसएस:

 body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; } summary:before { top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding: 0 2em 10px 2em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } / svg + xml; बेस 64, PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") नहीं दोहराने body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; } summary:before { top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding: 0 2em 10px 2em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } 

प्रदर्शन:


सही + दर्पण रोटेशन तीर प्रभाव पर Svg मार्कर:



सीएसएस:

 body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; } summary:before { top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: scale(1,-1); } summary ~ * { padding: 0 1em 10px 1.4em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } / svg + xml; बेस 64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4 =") नहीं दोहराने body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; } summary:before { top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: scale(1,-1); } summary ~ * { padding: 0 1em 10px 1.4em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } 

प्रदर्शन:


अब आप शुद्ध एचटीएमएल 5 और सीएसएस में जावास्क्रिप्ट के बिना सुंदर समझौते, स्पॉइलर और फेक बना सकते हैं।

इससे पहले कि आप आउटलाइन को हटा दें, लगभग 100 बार सोचें कि आप इसे कैसे बदल सकते हैं, ताकि व्यक्ति फ़ोकस को देख सके और कीबोर्ड या अन्य उपकरणों से आगे बढ़ सके।

यदि आपको आवश्यकता है कि जब आप एक स्पॉइलर खोलते हैं, तो अन्य बंद हो जाते हैं, आपको जावास्क्रिप्ट का उपयोग करना होगा, नीचे मैं सरल जेएस कोड का एक उदाहरण देता हूं जो इस समस्या को हल करेगा।

जावास्क्रिप्ट:

 var details = document.querySelectorAll("details"); for(i=0;i<details.length;i++) { details[i].addEventListener("toggle", accordion); } function accordion(event) { if (!event.target.open) return; var details = event.target.parentNode.children; for(i=0;i<details.length;i++) { if (details[i].tagName != "DETAILS" || !details[i].hasAttribute('open') || event.target == details[i]) { continue; } details[i].removeAttribute("open"); } } 

प्रदर्शन:


विवरण ब्राउज़रों द्वारा समर्थन तालिका।

निष्ठा से, फ्रीलांसरों सीएमएस cPortfolio के लिए लैंडिंग डिजाइनर के निर्माता