Checkbox toggle and reassigning sequence of widgets

So I have 4 checkboxes that toggle 4 different widgets aligned vertically.

I want to change the sequence of widgets based on clicks of checkboxes.

For example, initially all 4 widgets are visible.

When I deselect checkbox 2, widget 2 will disappear and widgets 3 and 4 will move up to occupy widget 2’s location.

Is this doable? I know it sounds simple. I can toggle 4 widgets easily with checkboxes, but I can’t rearrange the layout correspondingly.

Here’s a quick example using two repeaters. You could definitely do it without a repeater, but this is the quickest/most manageable way I can think of.

checkbox hideshow.rp (53.5 KB)

Take a look and let me know if you have any questions on the approach.

Thanks.
I’m just a little confused.

I was intending to load up images instead of repeater rows. How do I do this?

You can add images to repeaters, too:

  1. Add a column to store the image
  2. Right click in that row/column and select “Import Image”
  3. In the repeater, add an image placeholder
  4. add a case to the item onload that sets the image to value and select the column from the repeater.

Sample attached with some cute dogs. Sorry if you are a cat person…

checkbox hideshow w pics.rp (107.1 KB)

This file has the approach without a repeater, utilizing the “push/pull widgets below” option when showing/hding. Note that I put the images in a dynamic panel to make sure when pulling/pushing that you don’t accidentally push/pull other widgets :slight_smile:

checkbox hideshow no repeater.rp (109.5 KB)

You’re the best! The second one definitely works better.

Because, from what I have seen of the previous file (and I may be wrong here), is that the images were being funneled through the same image placeholder, which is a problem when you have a series of images with different heights.

But the second one above works perfectly, thank you. :slight_smile:

You could work some magic with setting the size dynamically if using images of different sizes. If it’s as simple as hidng/showing an image without any interactions the 2nd one is probably easiest to maintain anyway. The benefit of the repeater comes in if there’s a bunch of logic that goes with it.

At any rate, glad you got what you need!

Thanks. I think the second file works fine.

But I notice a problem in loading sequence on the last attached file.

For example, when you first load the page, the sequence of images is: 1, 2, 3, 4, which is correct.

But when you unselect them all, then select in reverse (lets say clicking from 4 to 1), the sequence is gone and images are inserted randomly.

Did I miss something on it? Can images retain their original sequence wherever you click?

You aren’t missing anything - the logic in my repeaterless version is using the push/pull below option for showing and hiding. So it doesn’t enforce an order. The repeater version, on the other hand will. If you want to use that approach you’d just need to store the width and height of your image in the repeater and add an action that sets the width and height.

There’s probably another way to do this, but personally, if I wanted to enforce the order, I’d go the repeater route.