Expand and collapse a block when another block in the page is clicked on

Custom Coding
1

Hey Softr community!

I’m trying to use a bit of custom code from the unlock-softr page. It’s supposed to expand/collapse blocks when another block is clicked.

The issue I am having is that on page load, the block that is supposed to be collapsed is expanded.

Is there a way to fix this code so that the block that is supposed to be collapsed starts out that way?

Code:

<script>
    const interval = setInterval(function () {
        if (typeof($) == "function") {
            $("#other1").click(function () {
               $("#list1").toggle("slow");
            });
            clearInterval(interval);
        }
    }, 100)
</script>

Link to guide:

Thanks in advance!

2

Hi John,
Strange behaviour, as when clicked, the block should vanish. If you click again it should appear again.
The block you want to hide and show has something specific?

Or do you want that behaviour on page load like this process here :point_down:?

  1. page load = hidden
  2. click = show
  3. re-click = hide again
1 Like
3

Hey @matthieu_chateau,

Exactly, what you’re describing is what I’m looking for:

  1. page load = hidden
  2. click = show
  3. re-click = hide again
4

There should be something like this to be added

<script>
 window.onload = function(){
  document.getElementById("#list1").style.display='none';
 };
</script>

But this is beyond my capabilities for now :sweat_smile:

@dcoletta , this one is for you

2 Likes
5

Gave this a try, but no success. I appreciate the attempt!

6

@dcoletta perhaps you can help here :slight_smile:

Thanks in advance.

7

I was able to get the effect you’re looking for with this change:

<script>
    const interval = setInterval(function () {
        if (typeof($) == "function") {
            $("#hero2").hide();
            $("#hero1").click(function () {
               $("#hero2").toggle("slow");
            });
            clearInterval(interval);
        }
    }, 100)
</script>
4 Likes
8

@dcoletta Thanks so much! This works perfectly!!

9

One follow up, in case this is useful for anyone else, I was able to modify this script to allow me to:

  1. Hide/Show multiple blocks at once
  2. Have multiple Hide/Show effects on one page
<script>
    const interval = setInterval(function () {
        if (typeof($) == "function") {
            $("#aws1").hide();
            $("#aws2").hide();
            $("#showaws").click(function () {
               $("#aws1").toggle("slow");
               $("#aws2").toggle("slow");
            });
            $("#reviewform").hide();
            $("#showreview").click(function () {
               $("#reviewform").toggle("slow");
            });
            clearInterval(interval);
        }
    }, 100)
</script>
3 Likes
10

@dcoletta @matthieu_chateau

I’m having trouble showing lists using this script. Is there a trick to making that work?

List Details work perfectly.

11

Thanks so much for the fast response :slight_smile:

12

Figured out a super hacky solution here.

It seems like what was happening is that the height of the list items was being lost in the dynamic fields.

What I did was insert dividers with a bunch of padding on top to create cell height allowing the dynamic information to show. You can then make the dividers the same color as the background to make them invisible.

1 Like
13

Thanks for sharing @JohnK :star_struck:

1 Like