{"id":6958,"date":"2024-04-14T16:26:41","date_gmt":"2024-04-14T08:26:41","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6958"},"modified":"2024-04-14T16:26:41","modified_gmt":"2024-04-14T08:26:41","slug":"display-and-conceal-elements-upon-clicking","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/display-and-conceal-elements-upon-clicking\/","title":{"rendered":"Display and conceal elements upon clicking"},"content":{"rendered":"\n
\n

Within this tutorial:<\/strong><\/p>\n

    \n
  1. Construct an animation to exhibit an element<\/li>\n
  2. Develop an animation to make an element vanish<\/li>\n
  3. Integrate an additional trigger element to reveal and configure both to display\/conceal upon click<\/li>\n<\/ol>\n

    <\/p>\n

    Establish an animation to showcase an element<\/h2>\n
      \n
    1. Choose the element you wish to serve as the initiator (for instance, “Reveal” button)<\/li>\n
    2. In the Interactions panel, opt for Mouse Click (Tap) from the On Selected Element dropdown<\/li>\n
    3. Within On 1st Click, choose Initiate an Animation<\/li>\n
    4. Tap the addition symbol beside Timed Actions<\/li>\n
    5. Name the animation as \u201cReveal\u201d<\/li>\n
    6. Select the element you desire to be visible (distinct from the initiator)<\/li>\n
    7. Tap the addition symbol next to Timed Actions and select Conceal\/Reveal<\/li>\n
    8. Tap the eye icon to configure the Display as none<\/li>\n
    9. Check the box next to Set as initial state<\/li>\n
    10. While within the Interactions panel display, click the addition symbol to introduce a second Conceal\/Reveal action under Timed Actions<\/li>\n
    11. In the Conceal\/Reveal section, reinstate the display setting to its original value (e.g., Block, in our scenario)<\/li>\n<\/ol>\n

      Construct an animation to make an element vanish<\/h2>\n
        \n
      1. Choose the same initiating element from the prior step<\/li>\n
      2. Within On 2nd Click, select Initiate an Animation<\/li>\n
      3. Tap the addition symbol beside Timed Actions<\/li>\n
      4. Name the animation as \u201cConceal\u201d<\/li>\n
      5. Select the identical element from the previous step that you wish to disappear<\/li>\n
      6. Tap the addition symbol next to Timed Actions and pick Conceal\/Reveal<\/li>\n
      7. Tap the eye icon to configure the Display as none<\/li>\n<\/ol>\n

        Integrate another trigger element and configure both to display\/conceal upon click<\/h2>\n
          \n
        1. Duplicate the original initiating element (\u201cShow Lyrics\u201d text)<\/li>\n
        2. Change its name (e.g., \u201cConceal Lyrics\u201d)<\/li>\n
        3. Establish an action and adjust its initial state display to none<\/li>\n
        4. Incorporate a second action and set the display to its original value (e.g., Block)<\/li>\n
        5. Select \u201cShow Lyrics\u201d and ensure its display setting is none to conceal it upon click<\/li>\n
        6. Click \u201cConceal Lyrics\u201d and add an animation that sets the display to none<\/li>\n
        7. Head back to \u201cShow Lyrics,\u201d append an animation to make it visible again upon 2nd click<\/li>\n
        8. Click and arrange all timed actions to occur simultaneously (0 seconds)<\/li>\n<\/ol>\n

          \u200d<\/p>\n

          \u200d<\/p>\n

          Interested in developing an accordion to gradually reveal content, such as FAQs? Explore the process of creating a custom accordion.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create a mouse click or tap trigger using one element to show and hide a different element on click.","protected":false},"author":2,"featured_media":6959,"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":[301],"tags":[],"class_list":{"0":"post-6958","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6958","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=6958"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6959"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}