Javascript 如何在打开状态下切换div并将内容加载到div中？

我想打开一个div，将一个页面加载到该div中，然后能够将其关闭

我想这样做与多个链接

<div id="main-nav">
            <div id="menu-container">
            <div id="menu">
            <ul>
                <li><a href="home.html"></a></li>
                <li id="clicklink"><a href="#">mission</a></li>
                <li><a href="#">leadership</a></li>
                <li><a href="#">awards</a></li>
                <li><a href="#">sustainability</a></li>
                <li><a href="#">faq</a></li>
            </ul>
            </div>
            <div id="clickme3">
                <img src="images/logo-sm.png">
            </div>

            </div>
            <div id="content-load">

            </div>
    </div>

$("#clicklink").toggle(function () {
    $("#main-nav").animate({
        height: "300",
    }, 1000, function () {
        $("#content-load").load("contentpage.html", function () {

        })
        function () {
            $("#main-nav").animate({
                height: "40",
            }, 1000, )
        };
    });
});

我不熟悉jQuery，但渴望学习。有没有办法让这个切换

You can view production here http://billygoforth/learning/CMD

您可以看到，它将底部导航向上移动（这是我想要的），并加载下面的外部页面内容（也是我想要的），但我想要它，因此如果再次单击链接，它将折叠，然后我可以将此jquery放在其他链接ID上

再次感谢

试着这样做：

// global variable 
var toggleHeight = $('#main-nav').height();
$("#clicklink").click(function () {
    if(toggleHeight <= 0){
       $("#main-nav").animate({
           height: "300px",
       }, 1000, function () {
           $("#content-load").load("contentpage.html");
       });
    }
    else{
       $("#main-nav").animate({
           height: "0px",
       }, 1000, function () { });
    }
});

//全局变量
var-toggleHeight=$（“#主导航”）.height（）；
$（“#单击链接”）。单击（函数（）{
如果（toggleHeight这就是我解决这个问题的方法：

plnkr

HTML:

检查控制台中是否有错误并进行修改。是的，请为我们提供一个修改，以便我们看到您的CSS和HTML。不清楚您在哪一点上要执行什么操作。1.何时关闭？您所说的“多链接”是什么意思？不熟悉Fiddle。我添加了HTML和到生产站点的链接。再次，非常感谢！我尝试了此操作，它只是使栏缩小并消失。我希望它向上推底部导航并从下面的外部页面加载内容。你可以在这里看到站点，我在上面添加了标记。再次感谢！
// global variable 
var toggleHeight = $('#main-nav').height();
$("#clicklink").click(function () {
    if(toggleHeight <= 0){
       $("#main-nav").animate({
           height: "300px",
       }, 1000, function () {
           $("#content-load").load("contentpage.html");
       });
    }
    else{
       $("#main-nav").animate({
           height: "0px",
       }, 1000, function () { });
    }
});

<div class="view" data-page="contentPage.html">
  <div class="actions">
    <label><input type="checkbox"> Toggle View</label>
  </div>
  <div class="content"></div>
</div>

<div class="view" data-page="other.html">
  <div class="actions">
    <label><input type="checkbox"> Toggle View</label>
  </div>
  <div class="content"></div>
</div>

$(function() {
  $(".view").each(function(){
    var page = $(this).data("page")
    $(this).find(".content").load(page, function(){
        $(this).animate({height: 40});
      });
  })
  $(".actions input").click(function() {
    if ($(this).is(":checked")) {
       $(this).parent().parent().siblings(".content").animate({height: 300});
    }else
   {
      $(this).parent().parent().siblings(".content").animate({height: 40});
    }
  });
});