Building collapsible sections and tabbed content areas in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में कोलैप्सिबल वेबपेज वेबसाइट सेक्शन और टैब्ड कंटेंट एरिया ब्लॉक स्ट्रक्चर में डाटा और इनफार्मेशन को क्रिएट करने में वेब डेवलपर को हेल्प करते है. किसी वेबसाइट में कोलैप्सिबल सेक्शन और टैब्ड कंटेंट एरिया एक एसेंशियल वेबसाइट ब्लॉक डेवलपमेंट फ़ीचर होते हैं. जो वेब डेवलपर को एक इंटरैक्टिव और ऑर्गनाइज़्ड आर्डर में वेबसाइट वेबपेज कंटेंट ब्लॉक बनाने में हेल्प करते हैं।
Here, we’ll explore the collapsible sections and tabbed content areas W3.CSS in detail.
Creating Collapsible Sections in W3.CSS Web Development.
W3.CSS बेस्ड कोलैप्सिबल वेबपेज वेबसाइट सेक्शन इंटनेट यूज़र को इसमें स्टोर डाटा कंटेंट और इनफार्मेशन को लार्ज या स्माल प्रीव्यू या कोलेप्स करने के फीचर्स प्रोवाइड करते हैं. जिससे डिज़ाइन वेबपेज वेबसाइट ब्लॉक मोर कॉम्पैक्ट और यूज़र-फ़्रेंडली हो जाता है। W3.CSS वेब डेवलपमेंट स्क्रिप्ट वेब डेवलपर को एक बिल्ट-इन क्लास, w3-collapse प्रोवाइड करता है. जो वेब डेवलपर को कोलैप्सिबल वेब कंटेंट एरिया डेवलप करने में हेल्प करते है।
Collapsible section example using the w3-collapse class in W3.CSS web development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Collapsible Section Block Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
.collapsible-header {
background-color: indigo;
color: white;
padding: 17px;
cursor: pointer;
font-size: 20px;
font-family: times;
font-weight: bold;
width: 100%;
border: 1;
text-align: center;
outline: none;
transition: background-color 0.7s;
}
.collapsible-header:hover {
background-color: lime;
}
.collapsible-content {
padding: 0 10px;
background-color: white;
font-family: times;
display: none; /* here we hide content by default with none display css properties*/
}
</style>
</head>
<body>
<!– Here we create a collapsible webpage section block–>
<h2>Lets Create a Open/Close Collapsible Section </h2>
<button class=”collapsible-header”>Html Collapsible Block Section</button>
<div class=”collapsible-content”>
<h2>Html</h2>
<p>HTML (HyperText Markup Language) is used to create and structure web pages layout. html helps us to apply headings, paragraphs, images, links, tables, forms, and other content or tag. </p>
</div>
<button class=”collapsible-header”>W3.css Collapsible Block Section</button>
<div class=”collapsible-content”>
<h2>W3.css</h2>
<p>W3.CSS is a modern, responsive CSS framework that helps developers quickly create attractive, responsive-friendly custom webpage or websites. </p>
</div>
<button class=”collapsible-header”>JavaScript Collapsible Block Section</button>
<div class=”collapsible-content”>
<h2>JavaScript</h2>
<p>JavaScript is a programming language used to make websites interactive, dynamic, and engaging for users. </p>
</div>
<script>
// Here we get all collapsible headers information
var coll = document.getElementsByClassName(‘collapsible-header’);
// Here we add click event listener for each collapsible block section
for (var p = 0; p < coll.length; p++) {
coll[p].addEventListener(‘click’, function() {
// here we can switch or toggle the ‘active’ class to change its appearance
this.classList.toggle(‘active’);
// Here we get the associated collapsible content
var content = this.nextElementSibling;
// Here we switch or toggle the visibility of the block content
if (content.style.display === ‘block’) {
content.style.display = ‘none’;
} else {
content.style.display = ‘block’;
}
});
}
</script>
</body>
</html>
Explanation of collapsible sections using the w3-collapse class in W3.CSS.
- Collapsible header – यहाँ इस एक्साम्प्ल में <button> ट्रिगर वेब एलिमेंट यूजर द्वारा क्लिक करने में एक हेडर की तरह वर्क करता है. जो कोलैप्सिबल वेब कंटेंट की विज़िबिलिटी को वेबपेज में स्विच या टॉगल करता है।
- Collapsible content – कोलैप्सिबल-कंटेंट क्लास वाला <div> ब्लॉक स्टार्ट में display: none प्रॉपर्टीज का यूज़ करके हाईड डिफाइन होता है। जब वेब यूजर इस हेडर बटन पर क्लिक करेगा तब यह कोलैप्सिबल ब्लॉक कंटेंट शो या हाईड होगा।
- JavaScript – यह जावास्क्रिप्ट प्रॉपर्टीज addEventListener मेथड हर कोलैप्सिबल वेबपेज हेडर सेक्शन पर क्लिक इवेंट को रिकॉर्ड या सुनता है। इंटरनेट यूजर के इसपे क्लिक करने पर, आस-पास का कंटेंट डिस्प्ले: ब्लॉक (विज़िबल) और डिस्प्ले: none (हिडन) प्रॉपर्टीज के बीच स्विच या अपने आप टॉगल हो जाता है।
Creating a tabbed content area in W3.CSS web development.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में टैब्ड कंटेंट वेब डेवलपर को किसी वेबपेज वेबसाइट में एक कॉम्पैक्ट फ़ॉर्मेट में मल्टीप्ल ब्लॉक सेक्शन एलिमेंट को डिस्प्ले करने में हेल्प करता है. जहाँ इसमें एक बार में सिर्फ़ एक ही टैब्ड कंटेंट सेक्शन डिस्प्ले या प्रीव्यू किया जाता है। आप W3.CSS में कुछ और अन्य क्लास के साथ टैब्ड नेविगेशन और कंटेंट एरिया को आसानी से डेवलप कर सकते है।
Example of tabbed content in W3.CSS web development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Tabbed Content Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
.tabcontent {
display: none;
padding: 17px;
font-family: times;
background-color: #fafaca;
}
.tablinks {
background-color: brown;
color: white;
padding: 17px 20px;
cursor: pointer;
border: 1;
font-family: times;
font-size: 17px;
width: 33.33%; /* Here it divides all tabs into the equal widths and size */
}
.tablinks:hover {
background-color: #12abcf;
}
.tablinks.active {
background-color: #123f; /* Here it displays active selected tab color */
}
</style>
</head>
<body>
<!– Here we create a multiple tab individual block button –>
<div class=”w3-bar w3-border”>
<button class=”w3-bar-item w3-button tablinks” onclick=”openTab(event, ‘Tab1’)”>Html</button>
<button class=”w3-bar-item w3-button tablinks” onclick=”openTab(event, ‘Tab2’)”>W3.css</button>
<button class=”w3-bar-item w3-button tablinks” onclick=”openTab(event, ‘Tab3’)”>JavaScript</button>
<button class=”w3-bar-item w3-button tablinks” onclick=”openTab(event, ‘Tab4’)”>Matlab</button>
</div>
<!– Here we display individual tab content information –>
<div id=”Tab1″ class=”tabcontent”>
<h3>Html</h3>
<p>HTML (HyperText Markup Language) is used to create and structure web pages layout. html helps us to apply headings, paragraphs, images, links, tables, forms, and other content or tag. </p>
</div>
<div id=”Tab2″ class=”tabcontent”>
<h3>W3.css</h3>
<p>W3.CSS is a modern, responsive CSS framework that helps developers quickly create attractive, responsive-friendly custom webpage or websites. </p>
</div>
<div id=”Tab3″ class=”tabcontent”>
<h3>JavaScript</h3>
<p>JavaScript is a programming language used to make websites interactive, dynamic, and engaging for users. </p>
</div>
<div id=”Tab4″ class=”tabcontent”>
<h3>Matlab</h3>
<p>MATLAB is a programming platform used for numerical computing, data analysis, visualization, and engineering. </p>
</div>
<script>
// Here we use JavaScript function to open multiple section tabs
function openTab(evt, tabName) {
// Here it hides all tab contents
var p, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(‘tabcontent’);
for (p = 0; p < tabcontent.length; p++) {
tabcontent[p].style.display = ‘none’;
}
// Here it removes the “active” class from all tab links
tablinks = document.getElementsByClassName(‘tablinks’);
for (p = 0; p < tablinks.length; p++) {
tablinks[p].className = tablinks[p].className.replace(‘ active’, ”);
}
// Here it shows the clicked tab content and add “active” class to the clicked tab link
document.getElementById(tabName).style.display = ‘block’;
evt.currentTarget.className += ‘ active’;
}
// Here by default, it open the first tab for use
document.getElementsByClassName(‘tablinks’)[0].click();
</script>
</body>
</html>
Explanation of tabbed content in W3.CSS web development.
- Tab buttons – यहाँ इस टैब्ड कंटेंट ब्लॉक में ये क्लिक करने वाले यूजर डिफाइन बटन होते हैं, (w3-bar-item w3-button और tablinks के साथ सीएसएस और जावास्क्रिप्ट में स्टाइल और फॉर्मेट किए गए), और जब यूजर द्वारा इन बटन पर क्लिक किया जाता है. तो ये मौजूदा वेबपेज में openTab फ़ंक्शन को ट्रिगर करते हैं।
- Tab content – टैब्ड कंटेंट ब्लॉक में tabcontent क्लास का यूज़ स्टार्ट में तब कंटेंट को हाईड करने में किया जाता है। जहा इसमें हर कंटेंट ब्लॉक एक स्पेशल टैब से कनेक्टेड होता है।
- JavaScript – यह मौजूदा वेबपेज जावास्क्रिप्ट फंक्शन बेस्ड openTab फ़ंक्शन क्लिक किए गए टैब के कंटेंट को डिस्प्ले करता है, और अन्य टैब्ड कंटेंट ब्लॉक को हाईड कर देता है। यह मौजूदा ब्लॉक में क्लिक किए गए टैब में एक्टिव क्लास भी ऐड करता है, और इसे अन्य टैब से रिमूव कर देता है. जिससे वेब यूज़र क्लियर देख सकते हैं, कि कौन सा टैब अभी एक्टिव या ओपन है।
