Building collapsible sections and tabbed content areas
Collapsible webpage sections and tabbed content areas in W3.CSS web development scripts help web developers create data and information in a block structure. Collapsible sections and tabbed content areas are essential website block development features in a website. They help web developers create website content blocks in an interactive and organized manner.
Here, we’ll explore the collapsible sections and tabbed content areas in W3.CSS in detail.
Creating Collapsible Sections in W3.CSS Web Development.
W3.CSS-based collapsible webpage sections provide internet users with the ability to preview or collapse the data, content, and information stored in them, making the webpage block design more compact and user-friendly. W3.CSS web development scripts provide web developers with a built-in class, w3-collapse. Which helps web developers develop collapsible web content areas.
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 an 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 tags. </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 – In this example, the <button> triggers a web element that acts as a header when clicked by the user, switching or toggling the visibility of collapsible web content on the webpage.
- Collapsible content – A <div> block with the collapsible-content class is initially defined as hidden using the display: none property. When the web user clicks this header button, this collapsible block content will be shown or hidden.
- JavaScript – This JavaScript property’s addEventListener method records or listens for click events on each collapsible webpage header section. When the user clicks on it, the surrounding content automatically switches or toggles between display: block (visible) and display: none (hidden) properties.
Creating a tabbed content area in W3.CSS web development.
Tabbed content in W3.CSS web development scripts help web developers display multiple block section elements in a compact format on a webpage website, where only one tabbed content section is displayed or previewed at a time. You can easily develop tabbed navigation and content areas with some of the other classes in 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 tags. </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 opens the first tab for use
document.getElementsByClassName(‘tablinks’)[0].click();
</script>
</body>
</html>
Explanation of tabbed content in W3.CSS web development.
- Tab buttons – This tabbed content block contains user-defined clickable buttons (styled and formatted in CSS and JavaScript with w3-bar-item, w3-button, and tablinks), and when clicked by the user, they trigger the openTab function in the current webpage.
- Tab content – The tabcontent class in a tabbed content block is used to initially hide the content, where each content block is associated with a specific tab.
- JavaScript – The JavaScript function-based openTab function displays the content of the clicked tab and hides other tabbed content blocks. It also adds the active class to the clicked tab in the current block and removes it from other tabs, allowing web users to clearly see which tab is currently active or open.
