The importance of creating modern, interactive, and user-friendly elements in web design is growing every day. In this blog post, we aim to build a dynamic content display system, a three-column flexbox component with content hidden in tabs, step by step. We will explain the HTML, CSS, and JavaScript techniques used in this process. Additionally, you can download the developed three-column flexbox and customize it for use in your own project.
Output
Market Analysis
This tab presents an in-depth analysis of current market conditions and trends, covering the current state of the market, growth potential, and key players. The analyses provide data-driven insights for making strategic decisions.
Real Estate Development
Provides information about current real estate development projects, market opportunities, and development strategies. This tab touches on key topics such as sustainability, cost-effectiveness, and innovative design.
Investment Opportunities
Contains analyses evaluating potential investment opportunities and financial returns, including risk management, portfolio diversification, and market forecasts to present investment strategies.
Technological Innovations
This area covers the latest technological developments and innovations transforming the industry, including artificial intelligence, machine learning, blockchain, and other advanced technologies.
Awards and Achievements
Displays the awards and success stories your company or team has won. The stories behind these successes highlight the importance of teamwork and innovative approaches.
Creative Ideas
Provides content on innovative projects, creative solutions, and ideas that advance the industry. This tab serves as a platform for inspiration and generating new projects.
Introduction and Approach
The structure and approach taken in our developed code snippets represent an interactive “three-column tabbed content display” approach that allows users to navigate between different categories or tabs. This approach is a frequently used feature in modern web designs and enhances the user experience by making content more organized and accessible. Here are the core elements and approach considered in this structure:
- The CSS Flexbox model (
display: flex;) enables tabs to be flexibly arranged and adapt to different screen sizes. This contributes to making the webpage responsive and mobile-friendly. - The tabs are designed to respond to user clicks. Each tab serves as a trigger to display the related content. This interaction is managed with JavaScript.
- JavaScript listens for user clicks and displays the content associated with the clicked tab while hiding the others. This dynamic content management allows for transitioning between content without the need to reload the page.
- Hover effects created with CSS (for example, the use of
box-shadow) provide visual feedback to users about which tab is active. This enriches the user experience. - Semantic elements in the HTML structure (such as
<div>,<h2>,<p>) clearly express the meaning and structure of the content. This makes the content more accessible for search engines and screen readers.
This structure and approach facilitate easy access for users to the information they need and provide web developers with the opportunity to present their content in an organized, accessible, and aesthetically pleasing manner.
The Core Structure:
The HTML structure forms the backbone of this layout. It consists of a parent container with the ID flexbox, which wraps around several child div elements. Each child div represents a tab with its own unique content. The use of <span class="icon"> within these tabs adds a graphical element, enhancing user interaction.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3 Column Flexbox</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<div id="flexbox">
<div id="mudos-1"><span class="icon">📈</span> Market Analysis</div>
<div id="mudos-2"><span class="icon">🏠</span> Real Estate Development</div>
<div id="mudos-3"><span class="icon">💸</span> Investment Opportunities</div>
<div id="mudos-4"><span class="icon">💻</span> Technological Innovations</div>
<div id="mudos-5"><span class="icon">🏆</span> Awards and Achievements</div>
<div id="mudos-6"><span class="icon">💡</span> Creative Ideas</div>
</div>
<div class="content" id="content-mudos-1">
<h2>Market Analysis</h2>
<p>This tab presents an in-depth analysis of current market conditions and trends, covering the current state of
the market, growth potential, and key players. The analyses provide data-driven insights for making
strategic decisions.</p>
</div>
<div class="content" id="content-mudos-2">
<h2>Real Estate Development</h2>
<p>Provides information about current real estate development projects, market opportunities, and development
strategies. This tab touches on key topics such as sustainability, cost-effectiveness, and innovative
design.</p>
</div>
<div class="content" id="content-mudos-3">
<h2>Investment Opportunities</h2>
<p>Contains analyses evaluating potential investment opportunities and financial returns, including risk
management, portfolio diversification, and market forecasts to present investment strategies.</p>
</div>
<div class="content" id="content-mudos-4">
<h2>Technological Innovations</h2>
<p>This area covers the latest technological developments and innovations transforming the industry, including
artificial intelligence, machine learning, blockchain, and other advanced technologies.</p>
</div>
<div class="content" id="content-mudos-5">
<h2>Awards and Achievements</h2>
<p>Displays the awards and success stories your company or team has won. The stories behind these successes
highlight the importance of teamwork and innovative approaches.</p>
</div>
<div class="content" id="content-mudos-6">
<h2>Creative Ideas</h2>
<p>Provides content on innovative projects, creative solutions, and ideas that advance the industry. This tab
serves as a platform for inspiration and generating new projects.</p>
</div>
<!-- Other contents would be added in a similar manner -->
</body>
</html>
Styling with CSS
The CSS for this layout leverages the Flexbox model to achieve a 3-column layout that is both flexible and responsive. The flex-wrap property ensures that the tabs wrap gracefully on smaller screens, maintaining the layout’s integrity without compromising usability. Style properties like border, background-color, and box-shadow contribute to the aesthetic appeal, making the tabs visually distinct and engaging. The @media query is a critical addition, ensuring that the text within the tabs is centered on devices with narrower screens, enhancing readability and accessibility.
<style>
#flexbox {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-around;
}
#flexbox>div {
border: 1px solid #ddd;
background-color: #f9f9f9;
width: calc(33.3333% - 15px);
height: auto;
/* Automatically adjust the height */
margin-bottom: 10px;
display: flex;
flex-direction: column;
/* Align contents vertically */
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
padding: 10px;
/* Add a bit more space for contents */
}
@media (max-width: 768px) {
#flexbox>div {
text-align: center;
/* Center-align the text */
}
}
#flexbox>div .icon {
margin-bottom: 10px;
/* Space between icon and text */
font-size: 24px;
/* Set icon size */
display: block;
/* Set icon as block */
}
#flexbox>div:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
#flexbox>div,
.content {
font-family: 'Manrope', sans-serif;
color: #333;
font-size: 14px;
}
.content {
display: none;
margin: 10px;
padding: 10px 25px 10px 25px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Default display for Market Analysis content */
#content-mudos-1 {
display: block;
}
</style>
Adding Interactivity with JavaScript
The dynamic nature of this layout is brought to life with JavaScript. By listening for click events on the tabs, the script toggles the visibility of the associated content. This interaction allows users to switch between different tabs seamlessly, making the content exploration intuitive and efficient. The script ensures that at any given time, only the content related to the active tab is displayed, keeping the user’s focus on the relevant information.
<script>
document.addEventListener("DOMContentLoaded", function () {
var tabs = document.querySelectorAll("#flexbox > div");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
var contentId = "content-" + this.id;
var content = document.getElementById(contentId);
var allContents = document.querySelectorAll(".content");
allContents.forEach(function (cn) {
cn.style.display = "none";
});
content.style.display = "block";
});
});
});
</script>
Conclusion:
The “3 Column Flexbox with Tabbed Content” layout is a testament to the capabilities of modern web technologies. By combining HTML, CSS, and JavaScript, developers can create interactive, responsive, and visually appealing web elements that enhance user experience. This layout is particularly useful for organizing content in a compact and accessible manner, making it ideal for various applications, from portfolios and product features to educational resources and FAQs.
