{"id":3573,"date":"2021-02-01T14:31:54","date_gmt":"2021-02-01T14:31:54","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3573"},"modified":"2023-06-12T14:53:23","modified_gmt":"2023-06-12T14:53:23","slug":"bootstrap-tutorial-responsive-accordion-with-twitter-bootstrap","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/bootstrap-tutorial-responsive-accordion-with-twitter-bootstrap\/","title":{"rendered":"Bootstrap Tutorial &#8211; Responsive Accordion with Twitter Bootstrap"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Bootstrap Tutorial &#8211; Responsive Accordion with Twiter Bootstrap<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Bootstrap Tutorial - Responsive Accordion with Bootstrap\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/GRGKNBY?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/GRGKNBY\"><br \/>\nBootstrap Tutorial &#8211; Responsive Accordion with Bootstrap<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">body {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    height: 100vh;\r\n    width: 100vw;\r\n    padding: 0 200px;\r\n    background-image: linear-gradient(72deg, #921F2E 17%, #DC2B1C 100%);\r\n    color: #fff;\r\n}\r\n\r\nh3 {\r\n    font-family: Roboto-Thin;\r\n    font-size: 34px;\r\n}\r\n\r\nh5 {\r\n    font-family: Roboto-Medium;\r\n    font-size: 20px;\r\n}\r\n\r\nh6 {\r\n    font-family: Roboto-Medium;\r\n    font-size: 16px;\r\n}\r\n\r\n.accordion-wrap {\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    \r\n    a {\r\n        color: #fff;\r\n        tex-decoration: none;\r\n        \r\n        &amp;:hover {\r\n            text-decoration: none;\r\n        }\r\n    }\r\n    \r\n    .accordion {\r\n    position: relative;\r\n    border-top: 1px solid #fff;\r\n    \r\n        &amp;:last-child {\r\n            border-bottom: 1px solid #fff;\r\n        }\r\n        \r\n        .teaser {\r\n            display: flex;\r\n            align-items: flex-start;\r\n            justify-content: flex-start;\r\n            width: 100%;\r\n            padding: 24px 100px 24px 0;\r\n            position: relative;\r\n\r\n            &amp;:last-child {\r\n                border-bottom: 1px solid #fff;\r\n            }\r\n\r\n            .time {\r\n                margin-top: 5px;\r\n                width: 200px;\r\n            }\r\n\r\n            .title {\r\n\r\n                .theme {\r\n                    opacity: .4;\r\n                }\r\n            }\r\n            \r\n            @media (max-width: 990px) {\r\n                flex-direction: column;\r\n            }\r\n        }\r\n        \r\n        .content {\r\n            padding: 0 120px 30px 200px;\r\n\r\n            @media (max-width: 1200px) {\r\n                padding: 0 120px 30px 0;\r\n            }\r\n        }\r\n        \r\n        .accordion-toggle {\r\n            width: 100px;\r\n            height: 100%;\r\n            position: absolute;\r\n            background-color: rgba(255,255,255,.14);\r\n            right: 0;\r\n            top: 0;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            transition: 0.3s ease;\r\n\r\n            span {\r\n                background-color: #fff;\r\n                transition: 0.3s ease;\r\n\r\n                &amp;.one {\r\n                    height: 1px;\r\n                    width: 26px;\r\n                    position: absolute;\r\n                    top: 50%;\r\n                }\r\n\r\n                &amp;.two {\r\n                    width: 1px;\r\n                    height: 26px;\r\n                    position: absolute;\r\n                    left: 50%;\r\n                    opacity: 0;\r\n                    transform: rotate(120deg);\r\n                }\r\n            }\r\n        }\r\n        \r\n        &amp;.collapsed {\r\n            .accordion-toggle {\r\n                \r\n                span.two {\r\n                    opacity: 1;\r\n                transform: rotate(0);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Bootstrap Tutorial &#8211; Responsive Accordion with Twiter Bootstrap See <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/bootstrap-tutorial-responsive-accordion-with-twitter-bootstrap\/\" title=\"Bootstrap Tutorial &#8211; Responsive Accordion with Twitter Bootstrap\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3574,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,12],"tags":[377,264,263,376,378,103,227],"newstopic":[576,573],"class_list":{"0":"post-3573","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-bootstrap","8":"category-web-development","9":"tag-bootstrap-tutorial","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-responsive-accordion","13":"tag-twitter-bootstrap","14":"tag-web-design","15":"tag-web-designer","16":"newstopic-bootstrap","17":"newstopic-css"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3573"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3573\/revisions"}],"predecessor-version":[{"id":3576,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3573\/revisions\/3576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3574"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3573"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}