jQuery隐藏/显示包含php include的div

Question

Let me first say I am 98% positive I am going about this the wrong way.

First time poster, be gentle. I am working on a website where I want a primitive admin portal back-end where the site can be managed in a single .php page. I have two columns, on the left is a series of stacked nav-pills and on the right is a PHP form to edit site content. Depending on which nav-pill is clicked, the right hand side will display a corresponding PHP form. I need the jQuery function to .empty() the container div called "admin-div" and .toggle() the proper div based on id. The jQuery doesn't seem to be working, and I'm having a hard time grasping why. I am entirely new at jQuery and I'm still a student, so forgive any obvious oversights. Code below for reference. Thanks in advanced! (Sorry if this is off-topic or not a valid question / post, I'm new).

            $(document).ready(function(){
            $("#geo-btn").click(function(){
            $("#admin-div").empty();
            $("#geo-div").toggle();
            });
        });     

        $(document).ready(function(){
            $("#school-btn").click(function(){
            $("#admin-div").empty();
            $("#school-div").toggle();
            });
        });



<div class="container">
<ul class="nav nav-pills nav-stacked nav-justified">
    <label>Edit Geographic Information</label>
        <li><button id="geo-btn" class="btn btn-warning" >Geography</button></li><br>
        <li><button id="school-btn" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div class="admin-div">
    <div id="geo-div" align="left" class="span8">
        <?php
            require("geo.inc.php");
        ?>
    </div>
    <div id="school-div" align="left" class="span8">
        <?php
            require("school.inc.php");
        ?>
    </div>
</div>

Answer 1

Is this what you are trying to do:

<ul class="nav nav-pills nav-stacked nav-justified">
    <label>Edit Geographic Information</label>
        <li><button category="geo"  class="btn btn-warning" >Geography</button></li><br>
        <li><button category="school" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div id="admin-div">
    <div id="geo-div" align="left" class="span8">
        <?php
            require("geo.inc.php");
        ?>
    </div>
    <div id="school-div" align="left" class="span8" style="display: none;">
        <?php
            require("school.inc.php");
        ?>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
     $(document).ready(function()
     {
        $(".btn").click(function()
        {
            var category = $(this).attr("category")

            $("#admin-div div").hide();
            $("#"+category+"-div").fadeIn();
        });
    });   
</script>