スライドパネルで内容を動的に読み込む方法を知りたい

Question

コンテンツをスライドパネルに動的に読み込む方法はありますか？

たとえば、スライドパネルを切り替えたときにニュースにコンテンツを読み込み、スクロールしたときにコンテンツを動的に読み込む必要があります。

スライドパネルの例は、http://jsfiddle.net/xpp5sgg8/2/です。したがって、パネルを切り替えると内容が表示されます。

HTML：

<div class="sidebar"> 
    <div class="toggle"></div> 
</div> 

のjQuery：

$('.toggle').on('click', function() { 
    $('.sidebar').toggleClass("sidebar-collapsed"); 
}); 

CSS：

.sidebar, .toggle { 
    transition:all .5s ease-in-out; 
    -webkit-transition:all .5s ease-in-out; 
} 

.sidebar { 
    background:lightgrey; 
    width:200px; 
    height:100vh; 
    position:absolute; 
    top:0; 
    left:0; 
} 

.toggle { 
    position:absolute; 
    right:5px; 
    top:5px; 
    width:30px; 
    height:30px; 
    background:black; 
} 

.sidebar-collapsed { 
    transform:translateX(-100%); 
    -webkit-transform:translateX(-100%); 
} 

.sidebar-collapsed .toggle { 
    right:-5px; 
    transform:translateX(100%); 
    -webkit-transform:translateX(100%); 
} 

Answer 1

ここでは、あなたのコードのための小さな一例です。これは、IMGをプリロードし、あなたがjQuery.ajaxのドキュメントを見て、jQueryのを使用している場合は、あなたの.sidebar

http://jsfiddle.net/xpp5sgg8/171/

に追加します。