Streaming live at 10am (PST)

First instance only, in CMS collection

I build a CMS template where I have functions represented in sections. I need for each section to be initialized when the features first is used. This means that the sections H1 needs to be hidden until the user adds content via the CMS form for the first time. The problem is that H1 will be repeated for each row in the collection. How do I to show H1 (or other elements) only for the first instance in the collection?

This is how it’s looks like:

H1
H2
Paragraph

H1
H2
Paragraph

This is how I want it:

H1
H2
Paragraph

H2
Paragraph

I guess it needs some javascript, but I don’t know how to. Your help is much appreciated.

Depending on your collection structure, you can probably use Conditional Visibility:

If there are separate fields for the H1 and H2, you can set your collection to only display those elements when the field isn’t empty. Another option is including two Collection List elements on the page, with the first one limited to the most recent collection item, and make sure the second list only has the H2 elements added to it.

Both require a specific setup for your collection but the first suggestion is going to be easier to manage and can allow Editors to add H1 elements to other collection items if they’d like without it getting hidden.

If you run into issues getting that setup, feel free to reply with your read-only link and I’d be happy to help out :+1:

1 Like

Thank you for your reply. I know about conditional visibility and I believe it can’t help me resolve my problem because the H1 is outside of the collection, but I might be wrong.

https://preview.webflow.com/preview/first-instance?utm_medium=preview_link&utm_source=designer&utm_content=first-instance&preview=f37dc821626dbb0ea530f2e0ed351263&mode=preview

Agree with @mikeyevin 2 collections could work, H1 doesn’t need to be a collection field but the 1st collection would contain the H1 and conditional visibility.

Yes, it’s an option, and I will try it… Thank you both

Your read-only links shows that the H1 is outside of the Collection List, so it will only appear next to the first item by design. You should only need to have Conditional Visibility if you’re wanting to include the H1 within the Collection itself.

Yes, I understand that. Including it in the collection list will have H1 appear in every instance of the collection, and that is not what I want. Is there a way to include it into the collection and only having it appear for the first instance?

I don’t really understand what you want here. You want a collection, but H1 should only be there if a user has added content to the CMS? Do you mean the H1 should only be there if there are any CMS items?

If that is the case, you need to use some custom code. Here’s what you need:

function hideH1(){
if  ($(".CLASS-COLLECTION-ITEM").is(":hidden")) {
    $(".H1-CLASS-YOU-WANT-TO-HIDE").hide();
}

$(document).ready(function() {
hideH1();
});

This will check to see if the page is displaying anything from the collection items and hide the H1 class.

1 Like

This is exactly what I’m looking for. Thank you so much.

Do I put this code in the header? So if I have several sections/features on the same page, how would I add them to the code?

Nope. It is using jQuery so it has to go before the body close area.

1 Like

Thank you very much!

So, I have never use jQuery, and I’m not a coder. I have added the code but nothing happens. What am I missing here?

My bad. This should work better:

$(document).ready(function() {
if  ($(".collection-item").is(":hidden")) {
    $(".heading").hide();
}});

It looks like we are almost there, and I thank you for your time and effort in helping me out.

First nothing happened when I added the code. I added a semicolon to (":hidden")); and the heading got hidden. But after adding content to the collection, only the content showed up. The header is still hidden.

Works like a charm here: https://jsfiddle.net/5bageu0L/

Are you getting any errors in your console?

The 2 collection option is very straightforward for those who would prefer a solution without code.
For the 1st collection limit items displayed to 1 and set conditional visibility on the H1 element.

2 Likes

No errors in the console. .heading is still ‘display: none’

The 2 collection trick works too, so try that.

1 Like

I will go for this option. Thank you very much.