Hide an Element Based on Whether info is present in a Column in the Collection

Ask the community
,
1

Hey everyone, I am having some issue trying to hide elements that have no content. I am working with Editor X. I have searched for three days and tried various snippets of code to achieve this but have not been successful yet.
I am looking to achieve a couple things:

**1.**  I am trying to hide a colored content box based on whether there is text present in it from the collection. For example:

  • I have a green content box with the text ‘audited’ inside, if there is no text, I want to hide the green content box (or I guess an equivalent would be hiding the highlighting from the text - whichever is easier)

    2. Also, if there is no text in the box thus not showing the box or the text, is there a way that the other content treats it like there was never a box there to begin with? So, another content box with text that is there would take its’ place?

    3. Is there a way to make the colored content box bigger or smaller depending on what length of word is in it? Example:

  • I have a content box with ‘the’ in it and one with Mississippi, is there a way to enable the box to flex and share the same margins?

    4. Is there a way to make social images/icons/logos appear to be dark if there is no link but when there is a link in the collection, have them appear darker?

Recap:

  1. Hide content box with no text associated with the particular column in collections

  2. allow other boxes to take its place in the repeater if it is hidden because of no text

  3. make the content box flex depending on how many characters are typed in it

  4. Logos appear darker when linked, greyed out when not linked.

I am by no means a coder; I do know the basics but that’s about the extent.

I have been working on this for 3 days now and am completely stuck. My other option is to just create images with the box around them and just upload for each repeater when necessary. Thank you in advance!

2

Hi,
This post is too long,

  1. Please break it into separate posts. It will make it easier for everyone and there’re more chances you’ll get an answer.

  2. For #1 you should describe how you bind the data to the repeater (dataset, direct query, something else?).

  3. For #1 and #2 please explain if you’re talking about the entire repeater item or an element inside the item.

  4. For #2 and #3 you should specify if you’re talking horizontally or vertically.

  5. For #4 you should specify if you use icons of your own (and what type? image, svg ?) or the Wix social icons.

Please add screenshots of you’re referencing to specific colored elements to make it clearer.

3

Sorry about that, I will make separate posts.

The data is binded to the repeater from a dataset
In both cases for #1 and #2, I am talking about a specific element inside the repeater.

For #2 and #3 the text is horizontal.

For #4 I am using my own images (.png). If I can achieve something easier with a different format (wix social icons or SVG, I can definitely do so).

I have attached a photo of the repeater and the different elements inside that I am speaking about as well as a link to the published preview. Any advice would be great as well. Thanks for your help!

https://tombdegen.editorx.io/degen

4

@tombdegen if I understand you correctly, you want to change the width of a repeater item based on its contents (right?). So this is not possible (unless you create your own repeater in custom element using html and css [on websites that are under your own domain).

As for #4 you can upload 2 versions of the image (grayed out and regular) and change the image src based on whether or not it’s linked. I didn’t write if the logo is in the repeater or not, I’ll assume it is and I’ll I assume that link is stored in your collection, let’s say under the socialLink field (changed it to your field key. field key is not the title (label) of the column in you collection but you can see by click the column header > Properties).
So do something like:

$w.onReady(() => {
const greyedOutImg= 'https://static.wixstatic.com/media/c41d_11fe0e3b0c.png'; 
const  regularImg= 'https://static.wixstatic.com/media/e41d_3er56yu789.png'; 
$w('#dataset1').onReady(() => {
    $w('#repeater1').forEachItem(($item, itemData) => {
        $item(#socialImage1').src = itemData.socialLink ? regularImg : greyedOutImg;
        })
    })
})

To find the image url, go to your media manager and copy it from there:

1374×817 144 KB