js form

form.html

<form id="id-form" hidden="hidden">
    <input id="id-input" type="text" title="input">
    <input id="id-input-submit" type="submit" value="submit">
</form>
<button id="id-button-toggle" data-hide="show-form" data-show="hide-form">show</button>
<script src="toggle-button-key.js"></script>

form.js

var form = {}

form.formQuery = function (selector) {
    var tags = selector.find('[title]')
    var f = {}
    
    for (var tag of tags) {
        var key = tag.title
        f[key] = tag.value
    }
    return f
}

form.toggle = function (form_jquery, button_jquery) {
    var text_show = button_jquery.data('show')
    var text_hide = button_jquery.data('hide')
    button_jquery.text(text_show)
    
    button_jquery.on('click', function () {
        var display = form_jquery.css('display')
        if (display != 'none') {
            form_jquery.slideUp()
            $(this).text(text_show)
        } else {
            form_jquery.slideDown()
            $(this).text(text_hide)
        }
    })
}