jQueryのslideToggleでは、スライド表示させる要素は上から現れます。これを、cssを書き換えることで、下からポップアップするような動きに変更できます。cssの大きな違いは、「 position: absolute; bottom: 0; 」を追加しいる点です。「Code表示」をクリックして確認できます（こちらもslideToggleです）。また、スライド表示要素とCode内容は同じ位置に表示しますので、重なります。どちらかをたたんでください。

サンプル1（上からスライド表示 / 上へたたむ）

サンプル2（下からスライド表示 / 下へたたむ）

サンプルのスクリプト

  $(function(){
    $('#test1').on('click', function () {
      $("#testwrap1").slideToggle();
    });
    $('#test2').on('click', function () {
      $("#testwrap2").slideToggle();
    }); 
    $("style").hide();
    $(".code11").click(function() {
      $(".code1")
        .find("style")
        .slideToggle();
    }); 
    $("style").hide();
    $(".code22").click(function() {
      $(".code2")
        .find("style")
        .slideToggle();
    });
  });