Hiding some dynamic elements

Ask the community
,
1

I have a list of dynamic elements displayed, in this case some text fields and buttons, but it’s mostly about the buttons this time. They all have the same name (which I don’t want to change by hand because of more elements being added in the future by my client). I want to hide some of these buttons in this list, if they have no URL attached to them. How would I go about that?

My current code looks like this:

$w.onReady(function () {
    $w("#Achievements").onReady(() => {
        var item = $w("#Achievements").getCurrentItem();
        if (item["url"] === "" || item["url"] === null || item["url"] === undefined) {
            // Change "yourFieldKey" to the Field Key of the database column you want to find
            $w("#button1").hide();
        } else {
            $w("#button1").show();
        }

        console.log(item["url"]);
    });
});
2

Here’s a more compact version of the solution:

javascript

Copy code

$w.onReady(() => {
    $w("#Achievements").onReady(() => {
        $w("#dynamicRepeater").forEachItem(($item, itemData) => {
            const url = itemData["url"]; // Replace "url" with your dataset's field key for the URL
            $item("#button").toggle(!!url); // Show if URL exists, hide otherwise
        });
    });
});

Key Points:

  • Simplified Logic: The toggle() method is used to show or hide the button based on whether the URL exists (!!url converts the URL to a boolean).
  • Compact Syntax: Minimal code while keeping it readable and functional.

Let me know if you’d like additional enhancements feel free to connect

3

Is there a .toggle( ) method in Velo? I don’t think so…

1 Like
4

You’re correct; Velo by Wix does not have a direct .toggle() method like jQuery. However, you can implement toggle-like functionality using JavaScript code in Velo.

5

This code is not accurate and should not have been marked as the solution.

6

If you want to hide and show dynamic elements (in a repeater) then this is the best logic to use (so that the elements do no “blink” when the page loads):

First, set your element to “hidden on load” by using the code panel …

Screenshot 2024-12-07 at 2.27.03 AM
Screenshot 2024-12-07 at 2.27.03 AM812×896 70.9 KB

This will hide that element on all of the items of your repeater.

Next you add some code to check if the value of that field in each item has a value or not. If there is no value, then nothing happens because your element is already hidden. If there is a value, then the element only for that item in the repeater will show.

$w.onReady(function () {
    $w("#myRepeater").onItemReady(($item, itemData) => {
        if (itemData.url) {
            $item('#button1').show();
        }
    });
});

You also mentioned that you will be adding more elements in the future. You simply add on to the code for other “buttons” (or whatever other elements you use) to apply the same logic. For example, let’s say you had 3 buttons in total. This is how the new code would look:

$w.onReady(function () {
    $w("#myRepeater").onItemReady(($item, itemData) => {
        if (itemData.url) {
            $item('#button1').show();
        }

        if (itemData.anotherUrl) {
            $item('#button2').show();
        }

        if (itemData.anotherField) {
            $item('#button3').show();
        }
    });
});

Now your original sample code you provide implies that you have a dynamic page, with a dynamic dataset and you are trying to hide and show basic elements on the dynamic page that are NOT in a repeater. In that case, the code changes.

The logic would still be the same. You would still set the element to be hidden (or collapsed) on load. But the new sample code would look like this:

$w.onReady(function () {
    $w("#Achievements").onReady(() => {
        let current = $w("#Achievements").getCurrentItem();

        if (current.url) {
            $w('#button1').show();
        }

        if (current.anotherUrl) {
            $w('#button2').show();
        }

        if (current.anotherField) {
            $w('#button3').show();
        }
    });
});

Remember that hide and show are opposites of each other. So if you hide an element, then you must use “show” in the code to show it.

If you use “collapse” then you would use “expand” in the code instead.

Hope that clears things up a little better.

Love,

Code Queen

1 Like