Can't Hide Image when URL is Blank

Dataset = #teamDataset
#image11 = facebook icon

Each team member does not have every social media platform. How do I hide blank entries and collapse for a clean layout?

I searched previous questions, but still no solution. Thank you in advance.

$w.onReady(function () {

    $w('#teamDataset').onReady( () => {

 let url= $w('#teamDataset').getCurrentItem();

 if (url) {
            $w('#image11').show();
 } 
 else {
            $w('#image11').collapse();
 }

 });

});

All field still show the Facebook icon even though the field is blank.

Thank you in advance.

You should specify the field key of the URL, something like:

let url = $w('#teamDataset').getCurrentItem().url;

Or .image if that’s the key of your field

I tried .url and all the facebook icons are hidden.

zedsick. com/content-creators

For example: I only have Facebook links for ‘Doofy Racing’ & ‘Zombie Racing’, but those icons are not visible.

Can anyone help with this issue? After doing a search, there’s others with the same issue still. Please and Thank you.

A screenshot of your DB-Setup would clarify everything. J.D. gave you already the right direction.
This part of your CODE is not completely defined …

let url=$w('#teamDataset').getCurrentItem();

You miss the ending, which would represent the current choosen DATAFIELD…

let url =$w('#teamDataset').getCurrentItem().url;

Of course it depends, for which DATAFIELD you are looking for in your DB.

You mentioned the dataset-ID and the image-ID, but not the right DATAFIELD-ID!

@russian-dima Thank you for the response, but I added “.url” many times and it’s still not working. The content with the url is hiding the field instead of revealing the url.

From the looks of the screenshot, what am I doing wrong? Thank you again.

@zedsickwidit
Ok, this is exactly the situation, why i asked you to show a screenshot of your DB, because your DB-Settings do NOT correspond to your CODE.
You are doing it wrong.

You have no DATAFIELD which is called —> URL
Your DATAFIELDS are called…

  1. Facebook (here you are storing the FB-URLs) and its ID will be —> “facebook”.
  2. YouTube (here you are storing the YT-URLs) and its ID will be —> “youtube or youTube”. Check the right spelling in your DB-settings.
  3. Twitch (here you are storing the TW-URLs) and its ID will be —> “twitch”.

It is not supprising that nothing works for you, because it should be something like…

example:

let url = $w ( ‘#teamDataset’ ). getCurrentItem () .facebook ;
let url = $w ( ‘#teamDataset’ ). getCurrentItem () .twitch ;
let url = $w ( ‘#teamDataset’ ). getCurrentItem () .youtube (youTube) ;

You have different ICONs (images) for every of the mentioned social-media.
So you will also have to do it for every single ICON.

For facebook-icon —> let url = $w ( ‘#teamDataset’ ). getCurrentItem () .facebook ;
For twitch-icon —> let url = $w ( ‘#teamDataset’ ). getCurrentItem () .twitch ;

…and so on…

You can invastigate your own CODE to understand it’S function much better, when you add some console-logs into your CODE.

example:
let url = $w ( ‘#teamDataset’ ). getCurrentItem () .facebook ; console.log(url)

The RESULTS you will be able to see in the CONSOLE! Either you use the wix-PREVIEW-MODE or you use it LIVE in a BROWSER of your choice on a PUBLISHED-WEBSITE.

In google-chrome for example you can open the CONSOLE with F-12 and ba navigating to —> CONSOLE.

Try to inspect your own code, with the suggested technique, to understand code-actions much better.

Good luck and happy coding! :wink: