How do I hide the registry form when the login button is clicked and the login form collapses to the reverse

advertisements

Im trying to make the form of registration or login hide and when the register or login button is clicked, the form will collapse. The codes work just fine but i want to make it when the login button is clicked, the login form will collapse and when the user wants to click on the register button, the login form will hide and the register form will collapse vice versa. I've tried the javascript but it turns out to be a mess. Somebody please help

     <button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#loginform" aria-expanded="false" aria-controls="collapseExample">LOGIN

                <script type="text/javascript">
                    var button = document.getElementById('loginbtn')
                    button.addEventListener('click',hideshow,false);

                    function hideshow() {
                    document.getElementById('loginform').style.display = 'block';
                    this.style.display = 'none'
                                        }
                    document.write("<br>")
                </script>
                </button>

                <button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#registerform" aria-expanded="false" aria-controls="collapseExample">
                    REGISTER

                <script type="text/javascript">
                    var button = document.getElementById('loginbtn')
                    button.addEventListener('click',hideshow,false);

                    function hideshow() {
                    document.getElementById('loginform').style.display = 'block';
                    this.style.display = 'none'
                                        }

                    document.write("<br>")
                </script>
                </button>

                    <div class="collapse" id="loginform">
                        <form class="form-horizontal" role="form" id="loginform">
                            <br>
                            <legend></legend>
                            <input type="text" class="form-control" placeholder="USERNAME" required>

                            <input type="password" class="form-control" placeholder="PASSWORD" required>

                            <br>

                            <input type="submit" class="form-control" role="button" id="logsubmit" value="LOGIN">

                        </form>
                    </div>

                    <br>

                <div class="collapse" id="registerform">
                        <form class="form-horizontal" role="form" id="registerform">
                            <br>
                            <legend></legend>
                            <input type="text" class="form-control" placeholder="USERNAME" required>
                            <input type="text" class="form-control" placeholder="CONFIRM USERNAME" required>

                            <input type="password" class="form-control" placeholder="PASSWORD"  required>
                            <input type="password" class="form-control" placeholder="CONFIRM PASSWORD" required>

                            <input type="email" class="form-control" placeholder="EMAIL" required>
                            <input type="email" class="form-control" placeholder="CONFIRM EMAIL" required>

                            <br>

                            <input type="submit"  role="button" class="form-control" id="regsubmit" value="REGISTER">

                    </form>
                </div>


did you consider to use JQuery ? i am asking it because using Jquery is will be much more easy for you. Jquery contains some method which helps you handle hide/show/toggle forms and even with out of the box animations.

You can read more about it in the following links:

jQuery show jQuery hide jQuery toggle

If i will try to apply jQuery to your code it will look something like the following:

$("#loginbtn").click(function(){
   $("#loginform").toggle();  // toggle will show hidden element and vice versa
});