There can be instances when you want to show/hide the content of the Dynamic Posts Template. For example, if you have a listing website and want to hide some information in the grid archive and toggle show/hide it only when the user clicks on a button then you can follow this tutorial.
Let's assume that we need to use the below information for our Post grid.
Post Title - Heading Widget
Post Content - Text Editor Widget
Mobile No. (ACF Number Field) - Button Widget
Website URL. (ACF URL Field) - Button Widget
Email (ACF Email Field) - Button Widget
Let's create a section template after creating the above ACF fields.
We can put the three of these buttons inside an inner section so that only the title, content, and icon are shown to users in the Dynamic Posts.
Now, the Icon widget is our trigger and the Inner section can be our Element to show or hide.
Let's give our icon a dynamic ID so that it is different for each item in the posts archive. You can use the token toggle[post:ID] so that it is like #toggle34, #toggle45, #toggle47.. and so on. 34, 45, and 47 are the Post IDs. Essentially, our IDs will be different and so will be the CSS IDs.
Now, click on the inner section, enable event visibility for this after setting Keep HTML to true. In the events tab, choose:
Click Event;
Set Show Animation to Slide(or any other as per need);
Leave Empty for "Hide other Elements"
Set toggle to True
For the trigger on this Element field set this token
#toggle[post:ID]
Set this template in your Dynamic Posts widget and customize other settings as per your requirements.
Congratulations! Now you can toggle show/hide the inner section in the Posts archive containing buttons with the click of the icon.