1

I'm not using css I have an html form with a bunch of div classes and inputs and it loads a .js which I'm using to capture the input and do the various things with the data.

<div class="input01">
 <label for="i_01_txtb1"><b>Txt Box 1:</b></label>
 <input type="text" name="i_01_txtb1" id="i_01_txtb1"/>
</div>
<div class="input02">
<div class="input03">

and so on up to 10. inside each div class is x amount of text inputs. each one also has a button at the start. When the buutton is pressed it hides or shows the div class of inputs.

Basically if you only need one, fill in the first set and submit. Otherwise click the button to show the next set and fill it in and submit, so you submit 2. If you need more... on and on.

All are hidden except input01 on start.

Everything above works exactly as described, except if the user only wants the first two inputs, the last 8 are hidden, but they have to scroll past the 8 invisible sets to get to the submit button.

I want the hidden elements to be collapsed, but I can't seem to find a collapsed state of elements. Is there such a thing?

snippet of code looks like this:

var div_input02 = document.querySelectorAll('.input02')

function to toggle visibility of items in div class

    // function to hide / show all elements in a div class
        function toggleVisClass(div_class) {
            if (div_class[0].style.visibility != 'hidden') {
                for (let el of div_class) el.style.visibility = 'hidden';
            } else {
                for (let el of div_class) el.style.visibility = 'visible';
            }
          };

on click of the button to toggle visibility:

        // on click show input 02
        $("#i_02_expand").click(function() {
            toggleVisClass(div_input02)
            toggleVis(btn_i_03)
        });

As stated, the above works but the page is still super long as even though all the non-desired inputs are invisible, they still take up layout space which i don't want when hidden.

thanks!

Lantz
  • 11
  • 1
  • See the answers to the linked question for details, but basically: When you set `visibility: hidden`, the element is hidden but it **still takes up room in the layout**. To completely hide the element and not have it take up room in the layout, use `display: none`, not `visibility: hidden`. (And I do strongly recommend using classes, rather than manipulating styles of individual elements.) – T.J. Crowder Feb 09 '21 at 12:36

0 Answers0