show/hide a span

by tsimbalar

HTML

<html>
    <head>
        <title>trying to check behavior of show/hide on a span</title>
    </head>
    <body>
        <span id="defaultSpan">this is a default span</span>
        <span id="blockSpan">this is a block span</span>
        
        <button id="btnShow">show</button>
        <button id="btnHide">hide</button>
        
        <div id="log"></div>
        
    </body>
</html>

CSS

#blockSpan{
        display:block;
}

JavaScript

function log(txt){
        $("div#log").prepend(txt + "<br/>");
}

$("#btnShow").click(function(){
    $("span").each(function(){
        $(this).show();
        log(this.id + ":"+ this.style.display);
    });
});

$("#btnHide").click(function(){
    $("span").each(function(){
        $(this).hide();
        log(this.id + ":"+this.style.display);
    });
});