ボタンを押して過去の記事一覧を表示させたい

お世話になります。
記事の一覧で「過去の記事を読む」を押すと特定のファイルをロードし、その結果をDIV内に出力するというプログラムを書きたく下記のようにしました。
（とても見にくい書き方でごめんなさい…）

問題なく動作はするのですが、ロードとさらに過去の記事を読み込んでいく方法をどのように書けば良いか分からず質問をさせて頂きました。

（1）Clickアクションがある度にload('test.php'）が行われていると思うのですが、連打をするとloadが何度も行われるのではと心配です。
これを「初回クリック時のみロード、2回目移行はshowとhideで表示・非表示を切り替えるのみ」というようにするにはどうすれば良いでしょうか？

（2）「▽過去の記事を読む」を押すと現状1件の過去の記事がアコーディオン形式で表示されるのですが、これを何回でも遡れる用にしたいと思っています。
（最近スマホサイトなどで見かけるページの下部にある「もっと読む」を押すと、記事ローディング後新しい「もっと読む」のボタンが表示され、過去の記事を同一ページ内でローディングしながら読み進めていけるイメージ）
「▽過去の記事を読む」を押す度にtest.phpに引き渡すパラメータ（例：page)が1→2→3とボタンと連動していければ良いのですが…。

どうぞ宜しくお願い致します。

【HTML】
<a href="javascript:void(0)" id="aaa" class="openbtn">▽過去の記事を読む</a>

<a href="javascript:void(0)" id="bbb" class="openbtn">▽過去の記事を読む</a>

<a href="javascript:void(0)" id="ccc" class="openbtn">▽過去の記事を読む</a>

【JavaScript】
$(function() {
$('.openbtn').click(function() {
var id = $(this).attr('id');
if ($("#more_"+ id).css('display') == 'none') {
$("#"+ id).text("△閉じる");
$("#more_"+ id).load('test.php?id='+ id, function() {
$("#more_"+ id).show();
});
} else {
$("#"+ id).text("▽過去の記事を読む");
}
$("#more_"+ id).slideToggle("slow");
});
});

行動規範の内容に同意します

回答1件

(1)についてですが、以下でどうでしょうか。
流れとしては、phpのロードが始まってから終わるまでボタンを押せなくし、
その後はdivタグの中が空であればロードは行わず、showします。

JavaScript
1function enableButton(id){
2    return function(){
3        $('#' + id).prop("disabled", false);//記事のロードが終わったのでenable
4         $("#more_"+ id).show();
5    }
6}
7$(function() { 
8    $('.openbtn').click(function() { 
9    // 記事のロードが終わるまでdisable
10    $('this').prop("disabled", true);
11    var id = $(this).attr('id'); 
12    if ($("#more_"+ id).css('display') == 'none') { 
13        $("#"+ id).text("△閉じる"); 
14        // divの中が空なら初回とする
15        if($("#more_"+ id).html == ""){
16            $("#more_"+ id).load('test.php?id='+ id, enableButton(id));
17        } else {
18            enableButton(id)();//divのshow
19        }
20    } else { 
21        $("#"+ id).text("▽過去の記事を読む"); 
22    } 
23    $("#more_"+ id).slideToggle("slow"); 
24    }); 
25});