{"id":339,"date":"2017-02-01T17:09:23","date_gmt":"2017-02-01T17:09:23","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=339"},"modified":"2017-02-01T17:09:23","modified_gmt":"2017-02-01T17:09:23","slug":"accordions","status":"publish","type":"page","link":"https:\/\/cogs.iitgn.ac.in\/newcogs\/sections\/accordions\/","title":{"rendered":"Accordions"},"content":{"rendered":"

[vc_row full_width=”stretch_row”][vc_column]\n\t\t\t

\n\t\t\t\t
\"\"<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
[vc_column_text]<\/p>\n

Accordions<\/h1>\n

Use any of these customisable blocks in your designs. The tabs below show just some of the possible combinations.<\/p>\n

\n

All blocks shown here are available to use in\u00a0
the included\u00a0Visual Composer Page Builder.[\/vc_column_text]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Accordion Image 1<\/i><\/h6>\n

[\/vc_column_text][vc_empty_space height=”45px”][\/vc_column][\/vc_row][vc_row full_width=”stretch_row”][vc_column]

    [vc_row_inner el_class=”switchable” ebor_title=”Light” ebor_type=”tab”][vc_column_inner width=”1\/2″]
      \n\t\t
    • \n\t\t\t
      \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
      \n\t\t\t\t<\/p>\n

      Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

      Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

      \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

    • \n\t\t\t
      \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
      \n\t\t\t\t<\/p>\n

      Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

      Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

      \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

    • \n\t\t\t
      \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
      \n\t\t\t\t<\/p>\n

      TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

      \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=”switchable bg–secondary” ebor_title=”Medium” ebor_type=”tab”][vc_column_inner width=”1\/2″]

        \n\t\t
      • \n\t\t\t
        \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
        \n\t\t\t\t<\/p>\n

        Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

        Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

        \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

      • \n\t\t\t
        \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
        \n\t\t\t\t<\/p>\n

        Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

        Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

        \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

      • \n\t\t\t
        \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
        \n\t\t\t\t<\/p>\n

        TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

        \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=”switchable bg–dark” ebor_title=”Dark” ebor_type=”tab”][vc_column_inner width=”1\/2″]

          \n\t\t
        • \n\t\t\t
          \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
          \n\t\t\t\t<\/p>\n

          Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

          Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

          \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

        • \n\t\t\t
          \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
          \n\t\t\t\t<\/p>\n

          Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

          Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

          \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

        • \n\t\t\t
          \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
          \n\t\t\t\t<\/p>\n

          TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

          \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=”switchable imagebg” ebor_title=”Image” ebor_type=”tab” css=”.vc_custom_1485969300516{background-image: url(http:\/\/localhost:8000\/cogsnewsite\/wp-content\/uploads\/2017\/02\/hero-1.jpg?id=287) !important;}”][vc_column_inner width=”1\/2″]

            \n\t\t
          • \n\t\t\t
            \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
            \n\t\t\t\t<\/p>\n

            Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

            Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

            \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

          • \n\t\t\t
            \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
            \n\t\t\t\t<\/p>\n

            Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

            Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

            \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

          • \n\t\t\t
            \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
            \n\t\t\t\t<\/p>\n

            TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

            \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner]<\/ul><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”120px”][vc_column_text]<\/p>\n

            Accordion Image 2<\/i><\/h6>\n

            [\/vc_column_text][vc_empty_space height=”45px”][\/vc_column][\/vc_row][vc_row full_width=”stretch_row”][vc_column]

              [vc_row_inner el_class=”switchable” ebor_title=”Light” ebor_type=”tab”][vc_column_inner width=”1\/2″]
                \n\t\t
              • \n\t\t\t
                \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
                \n\t\t\t\t<\/p>\n

                Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

                Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

                \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

              • \n\t\t\t
                \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
                \n\t\t\t\t<\/p>\n

                Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

                Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

                \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

              • \n\t\t\t
                \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
                \n\t\t\t\t<\/p>\n

                TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

                \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=”switchable bg–secondary” ebor_title=”Medium” ebor_type=”tab”][vc_column_inner width=”1\/2″]

                  \n\t\t
                • \n\t\t\t
                  \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
                  \n\t\t\t\t<\/p>\n

                  Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

                  Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

                  \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                • \n\t\t\t
                  \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
                  \n\t\t\t\t<\/p>\n

                  Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

                  Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

                  \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                • \n\t\t\t
                  \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
                  \n\t\t\t\t<\/p>\n

                  TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

                  \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=”switchable bg–dark” ebor_title=”Dark” ebor_type=”tab”][vc_column_inner width=”1\/2″]

                    \n\t\t
                  • \n\t\t\t
                    \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
                    \n\t\t\t\t<\/p>\n

                    Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

                    Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

                    \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                  • \n\t\t\t
                    \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
                    \n\t\t\t\t<\/p>\n

                    Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

                    Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

                    \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                  • \n\t\t\t
                    \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
                    \n\t\t\t\t<\/p>\n

                    TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

                    \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=”switchable imagebg” ebor_title=”Image” ebor_type=”tab” css=”.vc_custom_1485969300516{background-image: url(http:\/\/localhost:8000\/cogsnewsite\/wp-content\/uploads\/2017\/02\/hero-1.jpg?id=287) !important;}”][vc_column_inner width=”1\/2″]

                      \n\t\t
                    • \n\t\t\t
                      \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
                      \n\t\t\t\t<\/p>\n

                      Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

                      Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

                      \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                    • \n\t\t\t
                      \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
                      \n\t\t\t\t<\/p>\n

                      Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

                      Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

                      \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                    • \n\t\t\t
                      \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
                      \n\t\t\t\t<\/p>\n

                      TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

                      \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”1\/2″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”][vc_single_image image=”134″ img_size=”full” alignment=”center” el_class=”border–round box-shadow-wide”][\/vc_column_inner][\/vc_row_inner]<\/ul><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”120px”][vc_column_text]<\/p>\n

                      Accordion Video 1<\/i><\/h6>\n

                      [\/vc_column_text][vc_empty_space height=”45px”][\/vc_column][\/vc_row][vc_row full_width=”stretch_row”][vc_column]

                        [vc_row_inner el_class=”switchable” ebor_title=”Light” ebor_type=”tab”][vc_column_inner width=”5\/12″]
                          \n\t\t
                        • \n\t\t\t
                          \n\t\t\t\tCode Quality<\/span>\n\t\t\t<\/div>\n\t\t\t
                          \n\t\t\t\t<\/p>\n

                          Stack follows the BEM naming convention that focusses on logical code readability that is reflected in both the HTML and CSS. Interactive elements such as accordions and tabs follow the same markup patterns making rapid development easier for developers and beginners alike.<\/p>\n

                          Add to this the thoughtfully presented documentation, featuring code highlighting, snippets, class customizer explanation and you’ve got yourself one powerful value package.<\/p>\n

                          \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                        • \n\t\t\t
                          \n\t\t\t\tVisual Design<\/span>\n\t\t\t<\/div>\n\t\t\t
                          \n\t\t\t\t<\/p>\n

                          Stack offers a clean and contemporary to suit a range of purposes from corporate, tech startup, marketing site to digital storefront. Elements have been designed to showcase content in a diverse yet consistent manner.<\/p>\n

                          Multiple font and colour scheme options mean that dramatically altering the look of your site is just clicks away \u2014 Customizing your site in the included Visual Composer\u00a0Page Builder makes experimenting with styles and content arrangements dead simple.<\/p>\n

                          \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t\n\t\t

                        • \n\t\t\t
                          \n\t\t\t\tStack Experience<\/span>\n\t\t\t<\/div>\n\t\t\t
                          \n\t\t\t\t<\/p>\n

                          TommusRhodus\u00a0is an elite author known for offering high-quality, high-value products backed by timely and personable support. Recognised and awarded by Envato on multiple occasions for producing consistently outstanding products, it’s no wonder over 40,000 customers enjoy using TommusRhodus Themes.<\/p>\n

                          \n\n\t\t\t<\/div>\n\t\t<\/li>\n\t<\/ul>[\/vc_column_inner][vc_column_inner width=”7\/12″ css=”.vc_custom_1485969263457{padding-right: 55px !important;padding-left: 55px !important;}”]\n\t\t\t

                          \n\t\t\t\t
                          \n\t\t\t\t\t\"\"\n\t\t\t\t<\/div>\n\t\t\t\t
                          <\/div>\n\t\t\t\t