Apply/Remove Css on button

Question

On clicking "Show/Hide Submit" button the "Submit" button need to be shown and hidden. My code is working but is there a better way of doing it [Javascript part alone]

<style type="text/css">
    .displayNone{
        display : none;
    }
    </style>



    <button id="sub" >Submit</button>
    <button id="control">Show/Hide Submit</button>

    <script type="text/javascript">

    $( document ).ready(function() {
        $("#control").click(function(){
        if($("#sub").attr("class") == "displayNone"){
            $("#sub").attr("class","")
        }
        else{
            $("#sub").attr("class","displayNone")
        }

        }); 
    });
    </script>

Answer 1

Hope you are not aware of .toggleClass() predefined method :) Try the below code

$( document ).ready(function() {
    $("#control").click(function(){
    $("#sub").toggleClass("displayNone");
    }); 
});

Answer 2

As a possible improvement to @Nofi's answer, you could cache the "#sub" jQuery object in between clicks :) (It saves you having to find the element everytime)

$( document ).ready(function() {
    var $sub = $('#sub');
    $("#control").click(function(){
       $sub.toggleClass("displayNone");
    }); 
});