Question

Hide collection row

Forms

Updated April 11, 2023

asked on September 28, 2020

Hi,

I am trying to hide rows from a collection, but when I hide all fields then empty space corresponding to row appears. Has anyone done this?
This image shows the step where I am.

And in this other the class that has the empty spaces of the row.

Thanks!

0 0

Answer

SELECTED ANSWER

replied on September 29, 2020 • Show version history

Ah I see... In that case I think you'd need to use JavaScript to traverse up to the element you want to hide, and add a CSS class (either custom or hidden for display:none)

Something like this:

$(document).ready(function() {
    $('Button or element that the user clicks').click(function() {
        $( this ).closest('div.form-q').addClass('hidden');
    })
})

It would be a little more work if the elements are dynamic - you'd need to listen to the event that creates new elements, and when a new element is created then add your event listener to that element as well

1 0

Replies

replied on September 29, 2020

Hey Luis,

You could add a section before that part of the form, then hide the section itself. The div.form-q elements will be chilldren of that section so they will be hidden by inheritance.

If you don't like the style, there is an option to hide the section header text and border. It will still be a DOM element though, so you can still hook onto it.

0 0

replied on September 29, 2020

Hi Brian,

Thanks, it's a good option, however I forgot to indicate that the minimize check and the name field is also a row of the collection. So I can't hide the entire collection, because some rows need to be shown.

Regards,

0 0

SELECTED ANSWER

replied on September 29, 2020 • Show version history

Ah I see... In that case I think you'd need to use JavaScript to traverse up to the element you want to hide, and add a CSS class (either custom or hidden for display:none)

Something like this:

$(document).ready(function() {
    $('Button or element that the user clicks').click(function() {
        $( this ).closest('div.form-q').addClass('hidden');
    })
})

1 0

replied on September 29, 2020

Great! works.

Thanks Brian.

1 0

replied on April 11, 2023

Any tips on how to unhide the div again?

0 0

You are not allowed to follow up in this post.

Question

Question

Hide collection row

Answer

Replies

Sign in to reply to this post.