在页面加载：仅显示特定信息

Question

我有一个页面上会有很多切换，有些是动态创建的。我想知道我是否可以加载一个只显示特定div的页面，但是当用户点击一个按钮时，就会创建一个切换（完成此部分）并且用户无法看到仅显示一个页面的版本特定div除非他们删除页面上的所有其他内容。

我不知道我是否已经解释得很好：

开始时只显示此内容

点击保存按钮时，只显示此内容......

我的代码已经完成了部分内容。老实说，无法解决如何甚至启动页面加载部分。我已经查看了jQuery on page load函数，但不知道这是最好还是唯一的路径。

＆＃13;

＆＃13;

   //hide text onclick
            $(document).ready(function() {
                var $p = $('p#menu_title');
                $("input#save_first_prod").click(function(event) {
                    event.preventDefault();
                    $p.css('display', 'none');
                });
            });

 function toggle_visibility(id) {
                var e = document.getElementById(id);
                if (e.style.display == 'block' || e.style.display == '')
                    e.style.display = 'none';
                else
                    e.style.display = 'block';
            }

＆＃13;

.hidden {
    display: visible; 
}
div#first_product{
width: 50%;
margin-left: 301px;   
}

div#red_head{
background-color: #ed1c24;
height: 40px;
color: #fff;
padding-left: 15px;
line-height: 35px;
}

div#first_product{
background-color: #f1f1f2; 
height: 100%;
}

h3#menu{
color: #6d6e70;
padding-left: 15px;
}

/*OUTSIDE TOGGLE BUTTON*/
#products_tog_but{
background-color: #f8f9f9;
border: 1.5px dashed #999999;
width: 100%;
height: 40px;
border-radius: 5px;
}

div#hide_btn{
width:50%;
margin-left: 301px;
}

＆＃13;

div id="hide_btn">
        <button id="products_tog_but" onclick="toggle_visibility('first_product')">Hello!</button>
        </div>
        
     <!-- TOGGLE BTN SECTION-->   
        <div id="first_product">
            <div id="red_head">
                <p id="menu_title" class ="hidden" onclick="hideText('text1')" > Add your first menu item</p>
            </div>
            <h3 id="menu">Menu Section</h3>

            <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               

                <label id="cat_label" name="cat_label">Name</label>
                <input type="text" id="cat_name" name="cat_name" value="">

                <label id="desc_label" name="desc_label">Description</label>
                <input type="text" id="cat_desc" name="cat_desc" value="">

                <input type="Submit" id="save_first_prod" name="save_first_prod" onclick="toggle_visibility('first_product')" value=" + ADD"> 

            </form>


        </div>

＆＃13;

＆＃13;

＆＃13;