Show Hide Target Buttons

<!DOCTYPE html>
<html>
    <head>
        <style>

            body{
                font-family: Arial, Helvetica, sans-serif;
            }

            #section-01, #section-02{
                border:1px solid #dedede;
                padding:1em;
            }

            #section-01{
                display: none;
            }

        </style>
    </head>
<body>

<h1>Show Hide Buttons</h1>

<div id="section-01">
    <h3>Div One</h3>
    <button id='nt-show-tabs' type="button" class="nt-show-hide" data-host="section-01" data-target="section-02" data-display="block">Show Tabs</button>
</div>

<div id="section-02">
    <h3>The Second Div</h3>
    <button id='nt-hide-tabs' type="button" class="nt-show-hide" data-host="section-02" data-target="section-01" data-display="block">Hide Tabs</button>
</div>

 <script>

     initShowHideTabsHide();
     function initShowHideTabsHide(){
        var ntShowHideList = document.querySelectorAll(".nt-show-hide");
        for(var i = 0; i < ntShowHideList.length; i++) {
            ntShowHideList[i].addEventListener("click", doShowHideTabsClick);
        }
     }

    function doShowHideTabsClick(event){
        var thisId = event.target.id;
        var thisHost = event.target.getAttribute('data-host');
        var thisTargetId = event.target.getAttribute('data-target');
        var thisCssDisplay = event.target.getAttribute('data-display');

        var thisHideId = document.getElementById(thisHost);
        var thisShowId = document.getElementById(thisTargetId);
        thisHideId.style.display = "none";
        thisShowId.style.display = thisCssDisplay;
    }
 </script>

</body>
</html>