elHide / elShow / elRemove

These two functions allow you to hide or show a DOM element.

elHide(el, () => { 
    // Callback function. This is the hidden element.
})

elRemove hides and then directly removes the element

The js function toggleEl(el, el_form, value) shows or hides el.
If no other values are passed besides the element to show or hide, each time it's called it alternates the element's state. If a second element and a value are passed, then it shows or hides the element based on the value of a field indicated as the second element

<div class="form-group col-xl-6">
        <div class="form-check">
            <?php Form::checkbox('toggleCheckbox', 'Etichetta', '1'); ?>
            <div class="my-2" id="test1NotChecked">Checkbox not selected</div>
            <div class="my-2" id="test1Checked">Checkbox selected</div>
        </div>
    </div>

The javascript script

document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('[name="toggleCheckbox"]').addEventListener('input', () => { ck1() });
        ck1();
    });
    function ck1() {
        const checkbox = document.querySelector('[name="toggleCheckbox"]');
        toggleEl(document.getElementById('test1NotChecked'), checkbox, null);
        toggleEl(document.getElementById('test1Checked'));
    }

Toggle 2

This example with a select instead uses datasets to automatically configure toggleEl so you don't have to call javascript

<div class="form-group col-xl-6">
        <?php Form::select('toggleSelect', 'Etichetta', ['1' => 'Uno', '2' => 'Due', '3' => 'Tre'], '2'); ?>
        <div class="my-2" data-togglevalue="1" data-togglefield="toggleSelect">Select One</div>
        <div class="my-2" data-togglevalue="2" data-togglefield="toggleSelect">Select Two</div>
    </div>

toggleEls

If an element has the data-togglefield attribute then a toggleEl is created for the field with the name indicated in data-togglefield for example:

<input type="text" name="field1" >
    <div data-togglefield="field1" data-togglevalue="1">Show when value = 1</div>

This way elements are shown or hidden without calling javascript