Is there a tutorial for this site?

Community
1

I’m curious if there was a Finsweet Tutorial that I missed for the creation of this site?

I’d like to replicate a few things in this - for example the “filtering by” tags don’t appear until the user has started applying filters.

I’m also curious if the filter dropdowns are using the elements from the Accessible Library?

Thanks in advance

2

Hey @ashley! I am afraid we do not have any tutorial for this. However, the tags setup is pretty simple as it is the default behavior for the filter tags.

Screen Shot 2023-07-10 at 11.01.16
Screen Shot 2023-07-10 at 11.01.162310×676 179 KB

I believe we did not use the Accessible Library for this project but you can definitely use the filter elements within the library to replicate this.

1 Like
3

Hi @support-luis, thanks for your quick reply!

I recorded a short video to show you what I mean regarding the “Filtering by: tags” bar. The whole element is hidden until the user begins applying filters. And if they remove the filter, then the whole element returns to being hidden. Is it possible for me to apply this? Thanks!

4

Hey @ashley! I see what you mean, this is done with a CSS selector that targets elements with no siblings (when the tags are removed the .filter_tags-text element has no siblings) → 

      /* show filter by label */
      .filter_tags-text:only-child {
        display: none;
      }
    </style>

Here is the structure used for the tags component structure if you’d like to recreate it.
Screen Shot 2023-07-11 at 16.19.24

1 Like
5

Amazing! Thank you @Support-Luis :pray:

1 Like