{"id":2090,"date":"2024-06-11T15:21:36","date_gmt":"2024-06-11T14:21:36","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=2090"},"modified":"2024-06-11T15:21:37","modified_gmt":"2024-06-11T14:21:37","slug":"javascript-tabs-and-accordions-tutorial","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/","title":{"rendered":"How to Create Tabs and Accordions Using JavaScript."},"content":{"rendered":"\n

Creating tabs and accordions with JavaScript can significantly enhance the usability and organization of your web content. This tutorial on JavaScript tabs and accordions will allow users to navigate and interact with different sections of your website efficiently. In this article, we’ll guide you through the process of creating both tabs and accordions using HTML, CSS, and JavaScript.<\/p>\n\n\n\n

Introduction to Tabs and Accordions<\/strong><\/h2>\n\n\n\n

Tabs and accordions are popular UI components used to organize content on a web page. Tabs allow users to switch between different sections of content without leaving the page, while accordions expand and collapse sections to reveal or hide content.<\/p>\n\n\n\n

Creating Tabs<\/strong><\/h2>\n\n\n\n

HTML Structure<\/strong><\/h3>\n\n\n\n

First, let’s create the HTML structure for the tabs. We’ll have a container for the tab buttons and another for the tab content.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Tabs and Accordions<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n    <div class=\"tab-container\">\n        <div class=\"tab-buttons\">\n            <button class=\"tab-button active\" data-tab=\"tab1\">Tab 1<\/button>\n            <button class=\"tab-button\" data-tab=\"tab2\">Tab 2<\/button>\n            <button class=\"tab-button\" data-tab=\"tab3\">Tab 3<\/button>\n        <\/div>\n        <div class=\"tab-content active\" id=\"tab1\">Content for Tab 1<\/div>\n        <div class=\"tab-content\" id=\"tab2\">Content for Tab 2<\/div>\n        <div class=\"tab-content\" id=\"tab3\">Content for Tab 3<\/div>\n    <\/div>\n\n    <script src=\"scripts.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
CSS Styling<\/strong><\/h3>\n\n\n\n
Next, let’s style the tabs to make them visually appealing.<\/p>\n\n\n\n
* {\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 20px;\n}\n\n.tab-container {\n    width: 100%;\n    max-width: 600px;\n    margin: auto;\n}\n\n.tab-buttons {\n    display: flex;\n    justify-content: space-around;\n    margin-bottom: 20px;\n}\n\n.tab-button {\n    padding: 10px 20px;\n    cursor: pointer;\n    background-color: #f1f1f1;\n    border: none;\n    border-radius: 5px;\n    outline: none;\n}\n\n.tab-button.active {\n    background-color: #007bff;\n    color: white;\n}\n\n.tab-content {\n    display: none;\n    padding: 20px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    background-color: #f9f9f9;\n}\n\n.tab-content.active {\n    display: block;\n}\n<\/code><\/pre>\n\n\n\n
JavaScript Functionality<\/strong><\/h3>\n\n\n\n
Now, let’s add JavaScript to handle the tab switching functionality.<\/p>\n\n\n\n
document.addEventListener('DOMContentLoaded', () => {\n    const tabButtons = document.querySelectorAll('.tab-button');\n    const tabContents = document.querySelectorAll('.tab-content');\n\n    tabButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            tabButtons.forEach(btn => btn.classList.remove('active'));\n            tabContents.forEach(content => content.classList.remove('active'));\n\n            button.classList.add('active');\n            document.getElementById(button.getAttribute('data-tab')).classList.add('active');\n        });\n    });\n});\n<\/code><\/pre>\n\n\n\n
Creating Accordions<\/strong><\/h2>\n\n\n\n
HTML Structure<\/strong><\/h3>\n\n\n\n
Let’s create the HTML structure for the accordion.<\/p>\n\n\n\n
<div class=\"accordion-container\">\n    <div class=\"accordion-item\">\n        <button class=\"accordion-button\">Accordion 1<\/button>\n        <div class=\"accordion-content\">\n            <p>Content for Accordion 1<\/p>\n        <\/div>\n    <\/div>\n    <div class=\"accordion-item\">\n        <button class=\"accordion-button\">Accordion 2<\/button>\n        <div class=\"accordion-content\">\n            <p>Content for Accordion 2<\/p>\n        <\/div>\n    <\/div>\n    <div class=\"accordion-item\">\n        <button class=\"accordion-button\">Accordion 3<\/button>\n        <div class=\"accordion-content\">\n            <p>Content for Accordion 3<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n
CSS Styling<\/strong><\/h3>\n\n\n\n
Next, let’s style the accordion.<\/p>\n\n\n\n
.accordion-container {\n    width: 100%;\n    max-width: 600px;\n    margin: auto;\n}\n\n.accordion-item {\n    margin-bottom: 10px;\n}\n\n.accordion-button {\n    width: 100%;\n    padding: 10px;\n    cursor: pointer;\n    background-color: #f1f1f1;\n    border: none;\n    border-radius: 5px;\n    outline: none;\n    text-align: left;\n}\n\n.accordion-content {\n    display: none;\n    padding: 10px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    background-color: #f9f9f9;\n}\n<\/code><\/pre>\n\n\n\n
JavaScript Functionality<\/strong><\/h3>\n\n\n\n
Let’s add JavaScript to handle the accordion functionality.<\/p>\n\n\n\n
document.addEventListener('DOMContentLoaded', () => {\n    const accordionButtons = document.querySelectorAll('.accordion-button');\n\n    accordionButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            const content = button.nextElementSibling;\n            if (content.style.display === 'block') {\n                content.style.display = 'none';\n            } else {\n                document.querySelectorAll('.accordion-content').forEach(content => content.style.display = 'none');\n                content.style.display = 'block';\n            }\n        });\n    });\n});\n<\/code><\/pre>\n\n\n\n
Now, let’s integrate both the tab and accordion HTML structure together. Here\u2019s the updated HTML file that includes both the tabs and the accordion:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Tabs and Accordions<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n    <div class=\"tab-container\">\n        <div class=\"tab-buttons\">\n            <button class=\"tab-button active\" data-tab=\"tab1\">Tab 1<\/button>\n            <button class=\"tab-button\" data-tab=\"tab2\">Tab 2<\/button>\n            <button class=\"tab-button\" data-tab=\"tab3\">Tab 3<\/button>\n        <\/div>\n        <div class=\"tab-content active\" id=\"tab1\">Content for Tab 1<\/div>\n        <div class=\"tab-content\" id=\"tab2\">Content for Tab 2<\/div>\n        <div class=\"tab-content\" id=\"tab3\">Content for Tab 3<\/div>\n    <\/div>\n\n    <div class=\"accordion-container\">\n        <div class=\"accordion-item\">\n            <button class=\"accordion-button\">Accordion 1<\/button>\n            <div class=\"accordion-content\">\n                <p>Content for Accordion 1<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"accordion-item\">\n            <button class=\"accordion-button\">Accordion 2<\/button>\n            <div class=\"accordion-content\">\n                <p>Content for Accordion 2<\/p>\n            <\/div>\n        <\/div>\n        <div class=\"accordion-item\">\n            <button class=\"accordion-button\">Accordion 3<\/button>\n            <div class=\"accordion-content\">\n                <p>Content for Accordion 3<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script src=\"scripts.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
And here is the combined CSS:<\/strong><\/p>\n\n\n\n
* {\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 20px;\n}\n\n.tab-container {\n    width: 100%;\n    max-width: 600px;\n    margin: auto;\n}\n\n.tab-buttons {\n    display: flex;\n    justify-content: space-around;\n    margin-bottom: 20px;\n}\n\n.tab-button {\n    padding: 10px 20px;\n    cursor: pointer;\n    background-color: #f1f1f1;\n    border: none;\n    border-radius: 5px;\n    outline: none;\n}\n\n.tab-button.active {\n    background-color: #007bff;\n    color: white;\n}\n\n.tab-content {\n    display: none;\n    padding: 20px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    background-color: #f9f9f9;\n}\n\n.tab-content.active {\n    display: block;\n}\n\n.accordion-container {\n    width: 100%;\n    max-width: 600px;\n    margin: auto;\n}\n\n.accordion-item {\n    margin-bottom: 10px;\n}\n\n.accordion-button {\n    width: 100%;\n    padding: 10px;\n    cursor: pointer;\n    background-color: #f1f1f1;\n    border: none;\n    border-radius: 5px;\n    outline: none;\n    text-align: left;\n}\n\n.accordion-content {\n    display: none;\n    padding: 10px;\n    border: 1px solid #ddd;\n    border-radius: 5px;\n    background-color: #f9f9f9;\n}\n<\/code><\/pre>\n\n\n\n
And here is the combined JavaScript:<\/strong><\/p>\n\n\n\n
document.addEventListener('DOMContentLoaded', () => {\n    \/\/ Tab functionality\n    const tabButtons = document.querySelectorAll('.tab-button');\n    const tabContents = document.querySelectorAll('.tab-content');\n\n    tabButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            tabButtons.forEach(btn => btn.classList.remove('active'));\n            tabContents.forEach(content => content.classList.remove('active'));\n\n            button.classList.add('active');\n            document.getElementById(button.getAttribute('data-tab')).classList.add('active');\n        });\n    });\n\n    \/\/ Accordion functionality\n    const accordionButtons = document.querySelectorAll('.accordion-button');\n\n    accordionButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            const content = button.nextElementSibling;\n            if (content.style.display === 'block') {\n                content.style.display = 'none';\n            } else {\n                document.querySelectorAll('.accordion-content').forEach(content => content.style.display = 'none');\n                content.style.display = 'block';\n            }\n        });\n    });\n});\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ Tab functionality\n    const tabButtons = document.querySelectorAll('.tab-button');\n    const tabContents = document.querySelectorAll('.tab-content');\n\n    tabButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            tabButtons.forEach(btn => btn.classList.remove('active'));\n            tabContents.forEach(content => content.classList.remove('active'));\n\n            button.classList.add('active');\n            document.getElementById(button.getAttribute('data-tab')).classList.add('active');\n        });\n    });\n\n    \/\/ Accordion functionality\n    const accordionButtons = document.querySelectorAll('.accordion-button');\n\n    accordionButtons.forEach(button => {\n        button.addEventListener('click', () => {\n            const content = button.nextElementSibling;\n            if (content.style.display === 'block') {\n                content.style.display = 'none';\n            } else {\n                document.querySelectorAll('.accordion-content').forEach(content => content.style.display = 'none');\n                content.style.display = 'block';\n            }\n        });\n    });\n});\n<\/code><\/pre>\n\n\n\n
This combined setup allows you to have both tabs and accordions on the same webpage, making it a versatile and organized way to present content to users.<\/p>\n\n\n\n
Here’s the result!<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
By following this guide, you can create functional tabs and accordions using HTML, CSS, and JavaScript. These components help organize content and improve user experience on your website. Feel free to customize and expand upon this basic implementation to suit your specific needs.<\/p>\n\n\n\n
How to create image Galleries with Lightbox effect using JavaScript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Creating tabs and accordions with JavaScript can significantly enhance the usability and organization of your web content. This<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11],"tags":[8],"class_list":["post-2090","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-programming"],"yoast_head":"\nJavaScript Tabs and Accordions Tutorial %<\/title>\n<meta name=\"description\" content=\"Learn how to create interactive JavaScript tabs and accordions with this comprehensive tutorial. Enhance your web development skills today!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Tabs and Accordions Tutorial %\" \/>\n<meta property=\"og:description\" content=\"Learn how to create interactive JavaScript tabs and accordions with this comprehensive tutorial. Enhance your web development skills today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-11T14:21:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-11T14:21:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/Screenshot-2024-06-11-151148-1024x316.png\" \/>\n<meta name=\"author\" content=\"Kene Samuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/\"},\"author\":{\"name\":\"Kene Samuel\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/c501609bab46c16807eb32106074f206\"},\"headline\":\"How to Create Tabs and Accordions Using JavaScript.\",\"datePublished\":\"2024-06-11T14:21:36+00:00\",\"dateModified\":\"2024-06-11T14:21:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/\"},\"wordCount\":312,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Screenshot-2024-06-11-151148-1024x316.png\",\"keywords\":[\"programming\"],\"articleSection\":[\"javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/\",\"name\":\"JavaScript Tabs and Accordions Tutorial %\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Screenshot-2024-06-11-151148-1024x316.png\",\"datePublished\":\"2024-06-11T14:21:36+00:00\",\"dateModified\":\"2024-06-11T14:21:37+00:00\",\"description\":\"Learn how to create interactive JavaScript tabs and accordions with this comprehensive tutorial. Enhance your web development skills today!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Screenshot-2024-06-11-151148.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/Screenshot-2024-06-11-151148.png\",\"width\":1048,\"height\":323},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript-tabs-and-accordions-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"javascript\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Tabs and Accordions Using JavaScript.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/c501609bab46c16807eb32106074f206\",\"name\":\"Kene Samuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"caption\":\"Kene Samuel\"},\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/kene\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Tabs and Accordions Tutorial %","description":"Learn how to create interactive JavaScript tabs and accordions with this comprehensive tutorial. Enhance your web development skills today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Tabs and Accordions Tutorial %","og_description":"Learn how to create interactive JavaScript tabs and accordions with this comprehensive tutorial. Enhance your web development skills today!","og_url":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/","article_published_time":"2024-06-11T14:21:36+00:00","article_modified_time":"2024-06-11T14:21:37+00:00","og_image":[{"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/Screenshot-2024-06-11-151148-1024x316.png","type":"","width":"","height":""}],"author":"Kene Samuel","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/"},"author":{"name":"Kene Samuel","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/c501609bab46c16807eb32106074f206"},"headline":"How to Create Tabs and Accordions Using JavaScript.","datePublished":"2024-06-11T14:21:36+00:00","dateModified":"2024-06-11T14:21:37+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/"},"wordCount":312,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/Screenshot-2024-06-11-151148-1024x316.png","keywords":["programming"],"articleSection":["javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/","url":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/","name":"JavaScript Tabs and Accordions Tutorial %","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/Screenshot-2024-06-11-151148-1024x316.png","datePublished":"2024-06-11T14:21:36+00:00","dateModified":"2024-06-11T14:21:37+00:00","description":"Learn how to create interactive JavaScript tabs and accordions with this comprehensive tutorial. Enhance your web development skills today!","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/Screenshot-2024-06-11-151148.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/06\/Screenshot-2024-06-11-151148.png","width":1048,"height":323},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/javascript-tabs-and-accordions-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"javascript","item":"https:\/\/codeflarelimited.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Create Tabs and Accordions Using JavaScript."}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/c501609bab46c16807eb32106074f206","name":"Kene Samuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","caption":"Kene Samuel"},"url":"https:\/\/codeflarelimited.com\/blog\/author\/kene\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=2090"}],"version-history":[{"count":1,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2090\/revisions"}],"predecessor-version":[{"id":2093,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2090\/revisions\/2093"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=2090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=2090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=2090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}