{"id":6136,"date":"2024-04-14T19:31:38","date_gmt":"2024-04-14T11:31:38","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6136"},"modified":"2024-04-14T19:31:38","modified_gmt":"2024-04-14T11:31:38","slug":"develop-a-bespoke-accordion","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/develop-a-bespoke-accordion\/","title":{"rendered":"Develop\u2008a\u2008bespoke\u2008accordion"},"content":{"rendered":"\n
\n

Crafting a personalized accordion involves utilizing a dropdown element and interactions. This tutorial will cover:<\/p>\n

    \n
  1. How to insert a dropdown element<\/li>\n
  2. How to customize your dropdown switch<\/li>\n
  3. How to design your accordion<\/li>\n
  4. How to produce your bespoke animation\u200d<\/li>\n<\/ol>\n
    \n
    \"A<\/div>\n<\/figure>\n

    How to include a dropdown element<\/h2>\n

    The drop-down<\/strong> element contains default built-in functions that simplify its use as a personalized accordion \u2014 it uncovers the drop-down list<\/strong> upon click and conceals it upon clicking a distinct element or part of the page.\u00a0<\/p>\n

    You can integrate a drop-down element into your website by navigating to Add panel<\/strong> (A) > Elements<\/strong> > Advanced<\/strong> and dragging the drop-down<\/strong> element onto the canvas.\u00a0<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    How to modify the default drop-down styles<\/h3>\n

    To incorporate the dropdown in your personalized accordion, you must adjust the default dropdown element styles. Particularly, you ought to modify the width to ensure the dropdown occupies the entire space of its parent element (i.e., the element containing the custom accordion).\u00a0<\/p>\n

    Bonus tip:<\/strong> Assign a class<\/strong> to your dropdown (e.g., \u201cAccordion item\u201d) for reusability in styling. Explore more about styling using classes.<\/h6>\n

    To adjust the default dropdown styles:\u00a0<\/p>\n

      \n
    1. Choose the parent drop-down<\/strong> element on the Designer canvas (we designated it a class of \u201cAccordion item\u201d in this instance)<\/li>\n
    2. Visit Style panel<\/strong> > Size<\/strong><\/li>\n
    3. Specify Width<\/strong> as 100%<\/strong><\/li>\n<\/ol>\n
      \n
      \"Size<\/div>\n<\/figure>\n

      How to personalize your drop-down switch<\/h2>\n

      At this moment, you need to personalize your drop-down switch <\/strong>so it completely fills its parent element (i.e., the container) and conceals the content within the drop-down list when the accordion is closed. To accomplish this, tweak the drop-down switch\u2019s display<\/strong> and height<\/strong> properties:<\/p>\n

        \n
      1. Select the drop-down switch<\/strong> on the canvas and assign a class (e.g., \u201cAccordion toggle\u201d)<\/li>\n
      2. Navigate to Style panel<\/strong> > Layout<\/strong><\/li>\n
      3. Set Display<\/strong> to flexbox<\/strong> for full horizontal coverage<\/li>\n
      4. Set Align<\/strong> to center<\/strong> for vertical text centering on your accordion<\/li>\n
      5. Proceed to Style panel<\/strong> > Size<\/strong><\/li>\n
      6. Define a Height<\/strong> value (e.g., 80px)<\/li>\n<\/ol>\n
        \n
        \"Layout<\/div>\n<\/figure>\n

        How to design your accordion<\/h2>\n

        After this stage, if you test your site and interact with your accordion, you might observe that the accordion unfolds, yet the default content within may overlap surrounding content. This occurs because the default position<\/strong> style for the drop-down list is absolute<\/strong>. While this is the desired behavior for conventional drop-down usage like in menus or navbars, for your personalized accordion, you must alter the default positioning so the nearby content adjusts (e.g., shifts down or up) when the content inside the accordion expands.\u00a0<\/p>\n

        \n
        \"A<\/div>\n<\/figure>\n

        To innovate your accordion:\u00a0<\/p>\n

          \n
        1. Choose the parent drop-down <\/strong>element on the canvas (e.g., the \u201cAccordion item\u201d)\u00a0<\/li>\n
        2. Select the \u201ccog<\/strong>\u201d icon to unveil Dropdown settings<\/strong> and tap \u201cShow<\/strong>\u201d adjacent to Navigation<\/strong><\/li>\n
        3. Choose the List Box <\/strong>option on the artboard<\/li>\n
        4. Navigate to Design panel<\/strong> > Alignment<\/strong><\/li>\n
        5. Adjust Alignment<\/strong> to fixed<\/strong><\/li>\n
        6. Pick the ancestor dropdown element (e.g., \u201cAccordion item\u201d) on the artboard<\/li>\n
        7. Go to Design panel<\/strong> > Dimensions<\/strong><\/li>\n
        8. Set Mask<\/strong> to concealed<\/strong> to mask any content that goes beyond the accordion area<\/li>\n<\/ol>\n
          \n
          \"The<\/div>\n<\/figure>\n
          \n
          \"Position<\/div>\n<\/figure>\n

          Steps to design your personalized animation<\/h2>\n

          Now, create a unique animation that will handle both opening and closing your custom accordion with these steps:\u00a0<\/p>\n

            \n
          1. Establish initial actions<\/li>\n
          2. Animate the accordion expansion<\/li>\n
          3. Animate the accordion closure<\/li>\n<\/ol>\n

            Establish initial actions<\/h3>\n

            Initiate by crafting 2 initial actions (i.e., styles applied to the element before page load) for your accordion.<\/p>\n

            First, initiate an initial action for your dropdown:\u00a0<\/p>\n

              \n
            1. Choose the dropdown<\/strong> element on the artboard (e.g., \u201cAccordion item\u201d)<\/li>\n
            2. Navigate to Interactivity panel<\/strong> > Element trigger<\/strong> and tap the \u201cplus<\/strong>\u201d symbol to create a fresh element trigger<\/li>\n
            3. Opt for Dropdown expands<\/strong><\/li>\n
            4. Tap Choose an action<\/strong> under Menu reveals<\/strong><\/li>\n
            5. Opt for Launch an animation <\/strong>under Personalized animation<\/strong><\/li>\n
            6. Tap the \u201cplus<\/strong>\u201d symbol adjacent to Scheduled animations<\/strong><\/li>\n
            7. Assign a name to your custom animation (e.g., \u201cAccordion expands\u201d)<\/li>\n
            8. Tap the \u201cplus<\/strong>\u201d symbol next to Activities<\/strong> to incorporate an action to your animation<\/li>\n
            9. Opt for Magnitude <\/strong>under Various<\/strong><\/li>\n
            10. Mark the \u201cSet as initial state\u201d checkbox under Timing<\/strong><\/li>\n
            11. Enter a height<\/strong> value (e.g., 80px) under Magnitude <\/strong>that aligns with the height given to your dropdown<\/strong>switch<\/strong> (e.g., the \u201cAccordion switch\u201d) in the prior steps<\/li>\n
            12. Tap Save<\/strong><\/li>\n<\/ol>\n

              Following that, initiate an initial action for the switch icon:\u00a0<\/p>\n

                \n
              1. Pick the Symbol<\/strong> inside the dropdown element<\/li>\n
              2. Head to the Design panel<\/strong> and label your icon class (e.g., \u201cAccordion icon\u201d) \u2014 now your animation can influence all instances of the icon<\/li>\n
              3. Select your ancestor dropdown<\/strong> element on the artboard (e.g., \u201cAccordion item\u201d)<\/li>\n
              4. Unfold the Interactivity panel\u00a0<\/strong><\/li>\n
              5. Choose the Dropdown expands<\/strong> interaction you crafted in the previous steps<\/li>\n
              6. Tap the \u201cgear<\/strong>\u201d symbol adjacent to the customized timed animation you crafted previously (e.g., the \u201cAccordion expands\u201d interaction)<\/li>\n
              7. Choose the icon<\/strong> (e.g., \u201cAccordion icon\u201d)<\/li>\n
              8. Tap the \u201cplus<\/strong>\u201d symbol next to Activities <\/strong>to set up an initial action for the icon\u00a0<\/li>\n
              9. Opt for Rotate<\/strong> under Alter<\/strong>\u00a0<\/li>\n
              10. Mark the \u201cSet as initial state\u201d checkbox under Timing<\/strong>\u00a0<\/li>\n
              11. Head to Rotate<\/strong> and dial the z-axis<\/strong> to 0<\/strong>degrees<\/strong><\/li>\n
              12. Tap Save<\/strong><\/li>\n<\/ol>\n
                \n
                \"A<\/div>\n<\/figure>\n
                \n
                \"The<\/div>\n<\/figure>\n

                Animate the accordion expansion<\/h3>\n

                Next, set up the actions for expanding the accordion that occur simultaneously when the accordion is clicked \u2014 the \u201cAccordion item\u201d size will adjust to the content size within it, and the \u201cAccordion icon\u201d will turn 180 degrees.\u00a0<\/p>\n

                To alter the size of the \u201cAccordion item\u201d and rotate the \u201cAccordion icon\u201d upon accordion opening:\u00a0<\/p>\n

                  \n
                1. Choose the ancestor dropdown <\/strong>element on the artboard (e.g., \u201cAccordion item\u201d)<\/li>\n
                2. Unlock the Interactivity panel\u00a0<\/strong><\/li>\n
                3. Select the Dropdown expands<\/strong> interaction you formulated earlier<\/li>\n
                4. Tap the \u201cgear<\/strong>\u201d symbol adjacent to the customized timed animationyou fashioned in the prior steps (e.g., the \u201cAccordion opens\u201d animation)\u00a0<\/li>\n
                5. Tap the \u201cplus<\/strong>\u201d symbol beside Actions <\/strong>to insert an undertaking to your animation<\/li>\n
                6. Opt for Size<\/strong> within Miscellaneous<\/strong><\/li>\n
                7. Deselect the \u201cSet as initial state\u201d checkbox beneath Timing<\/strong><\/li>\n
                8. Navigate to Size<\/strong> and input \u201cauto<\/strong>\u201d for the height<\/strong> \u2014 this corresponds to the height of your accordion to its content inside\u00a0<\/li>\n
                9. Pick the icon<\/strong> (e.g., \u201cAccordion icon\u201d)<\/li>\n
                10. Tap the \u201cplus<\/strong>\u201d symbol adjacent to the \u201cAccordion item\u201d Size<\/strong> action you just established to append another undertaking at that timestamp \u2014 this guarantees that both of these undertakings animate concurrently<\/li>\n
                11. Choose Rotate<\/strong> beneath Transform<\/strong>\u00a0\u00a0<\/li>\n
                12. Head to Rotate<\/strong> and adjust the z-axis<\/strong> to 180<\/strong>degrees<\/strong> \u2014 this rotates the icon so that it directs upwards when the accordion opens<\/li>\n
                13. Tap Save<\/strong><\/li>\n<\/ol>\n
                  Note: <\/strong>You have the option to modify the easement (i.e., the acceleration and deceleration of the animation transition) of each action. Obtain more information regarding interpolation, easement, and smoothing.<\/h6>\n
                  \n
                  \"A<\/div>
                  You can hover an existing action to create an additional action at the same timestamp. Actions that happen at the same timestamp will animate concurrently.
                  <\/em><\/figcaption><\/figure>\n
                  \n
                  \"The<\/div>\n<\/figure>\n

                  Animate the accordion closing<\/h3>\n

                  Next, you\u2019ll establish an interaction for the accordion closing. This interaction will contain the undertakings that transpire when the accordion item is pressed a second time or when a visitor clicks outside the accordion item \u2014 the accordion item will revert to its initial size, and the icon will rotate back to 0 degrees.\u00a0<\/p>\n

                  To animate the accordion closing:<\/p>\n

                    \n
                  1. Pick the parent dropdown <\/strong>element on the canvas (e.g., \u201cAccordion item\u201d)<\/li>\n
                  2. Reveal the Interactions panel\u00a0<\/strong><\/li>\n
                  3. Opt for the Dropdown opens<\/strong> interaction you designed in the prior steps\u00a0<\/li>\n
                  4. Tap Select an action<\/strong> beneath Menu closes<\/strong>\u00a0<\/li>\n
                  5. Select Start animation<\/strong><\/li>\n
                  6. Tap the \u201cplus<\/strong>\u201d symbol adjacent to Timed animations to craft a customized animation<\/li>\n
                  7. Assign a name to your custom animation (e.g., \u201cAccordion closes\u201d)<\/li>\n
                  8. Tap the \u201cplus<\/strong>\u201d symbol to insert an undertaking to your animation<\/li>\n
                  9. Opt for Size <\/strong>beneath Miscellaneous<\/strong><\/li>\n
                  10. Input a height<\/strong> value (e.g., 80px) that coincides with the height you allocated to your dropdown<\/strong> element for its initial state in the previous steps<\/li>\n
                  11. Select the icon<\/strong> on the canvas or in the Navigator (e.g., \u201cAccordion icon\u201d)<\/li>\n
                  12. Tap the \u201cplus<\/strong>\u201d symbol adjacent to the \u201cAccordion item\u201d Size<\/strong> action you just crafted to add another undertaking at that timestamp \u2014 this ensures that both of these undertakings animate concurrently<\/li>\n
                  13. Opt for Rotate<\/strong> beneath Transform<\/strong>\u00a0<\/li>\n
                  14. Head to Rotate<\/strong> and adjust the z-axis<\/strong> to 0<\/strong>degrees<\/strong> \u2014 this rotates the icon back to its initial position so it directs downwards when the accordion closes<\/li>\n
                  15. Tap Save<\/strong><\/li>\n<\/ol>\n
                    \n
                    \"The<\/div>\n<\/figure>\n

                    And that concludes your successful creation of a unique accordion using interactions!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Build a custom accordion using Webflow\u2019s dropdown element and interactions.","protected":false},"author":2,"featured_media":6137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6136","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6136"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6137"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}