GitHub<\/a><\/p>\n\nSee the Pen Dynamic Tabs by Jo Dahl (@ehrenglaube) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
This is a dynamic material design tabs with an interface to add and remove new tabs.\u00a0<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":1202,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[239174062,1825871],"class_list":["post-251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accordion-tabs","tag-material-design","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/06\/dynamic-material-design-tabs.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":88,"url":"https:\/\/codemyui.com\/material-design-tabs\/","url_meta":{"origin":251,"position":0},"title":"Material Design Tabs","author":"Hima Vincent","date":"November 12, 2015","format":false,"excerpt":"Use this material design inspired accordion tabs in your websites. Designed by Andy Tran. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Material Design Tabs","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/material-design-tabs.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/material-design-tabs.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/material-design-tabs.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/11\/material-design-tabs.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":139,"url":"https:\/\/codemyui.com\/material-design-tabs-using-vanilla-javascript\/","url_meta":{"origin":251,"position":1},"title":"Material Design Tabs Using\u00a0Vanilla JavaScript","author":"Hima Vincent","date":"October 8, 2015","format":false,"excerpt":"Check out this cool material design vanilla javascript tabs designed by Luky Vj If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Material Design Tabs Using Vanilla JavaScript","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/material-design-tabs-using-vanilla-javascript.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/material-design-tabs-using-vanilla-javascript.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/material-design-tabs-using-vanilla-javascript.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/material-design-tabs-using-vanilla-javascript.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":286,"url":"https:\/\/codemyui.com\/css-only-material-design-tabs\/","url_meta":{"origin":251,"position":2},"title":"CSS Only Material Design Tabs","author":"Saijo George","date":"May 27, 2015","format":false,"excerpt":"Check out this\u00a0Material Design inspired Tabs using CSS, no Javascript required. It\u2019s great if you want to work with lot of content in a limited space.Designed by Ben Mildren. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"CSS Only Material Design Tabs","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/05\/css-only-material-design-tabs.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29187,"url":"https:\/\/codemyui.com\/accordion-tabs-design-with-tab-label-slide-in-animation\/","url_meta":{"origin":251,"position":3},"title":"Accordion Tabs Design With Tab Label Slide-in Animation","author":"Saijo George","date":"January 10, 2020","format":false,"excerpt":"This is really cool material design card UI inspired accordion tab by Rafaela Lucas. There is an animation effect when you choose a tab, the tab title label gets a dropdown background and a text scroll effect and as the content is loaded the table label is also slid into\u2026","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Accordion Tabs Design With Tab Label Slide-in Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Accordion-Tabs-Design-With-Tab-Label-Slide-in-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29162,"url":"https:\/\/codemyui.com\/material-design-recipe-card-design-with-slideout-panel-for-instructions-and-ingredients\/","url_meta":{"origin":251,"position":4},"title":"Material Design Recipe Card Design With SlideOut Panel for Instructions and Ingredients","author":"Saijo George","date":"January 8, 2020","format":false,"excerpt":"This fancy material design recipe card UI was designed by Max, when you click on the recipe image a hidden card slides out revealing the list of ingredients and instructions in an accordion tab. If you are having trouble with the pen, try the archived copy on GitHub Recipe Card\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Material-Design-Recipe-Card-Design-With-SlideOut-Panel-for-Instructions-and-Ingredients.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Material-Design-Recipe-Card-Design-With-SlideOut-Panel-for-Instructions-and-Ingredients.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Material-Design-Recipe-Card-Design-With-SlideOut-Panel-for-Instructions-and-Ingredients.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Material-Design-Recipe-Card-Design-With-SlideOut-Panel-for-Instructions-and-Ingredients.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27208,"url":"https:\/\/codemyui.com\/button-like-accordion-tab\/","url_meta":{"origin":251,"position":5},"title":"Button-like Accordion Tab","author":"Saijo George","date":"March 24, 2019","format":false,"excerpt":"This according tab designed by Benjamin Koehler unveils each tab content with a slide in animation. If you are having trouble with the pen, try the archived copy on GitHub Accordion Tab Snippet","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Button-like Accordion Tab","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Button-like-Accordion-Tab.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Button-like-Accordion-Tab.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Button-like-Accordion-Tab.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/03\/Button-like-Accordion-Tab.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=251"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/251\/revisions"}],"predecessor-version":[{"id":26357,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/251\/revisions\/26357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1202"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}