jquery - cssでjQueryのshow hide toggleの表示を設定する

Question

CSS で表示を設定したい理由は、すべてのページでページごとに異なる特定のコンテンツを展開または折りたたむ必要があるためです。現在のところ、各ページの表示設定ごとに異なる JS ファイルをロードする必要があるようです。すべてを1つのファイルに集中させたいのですが...

CSS:

div.expandable1 {display:block;}
div.expandable2 {display:none;}  [etc]

HTML:

<p id="tab1" class="button plus1">NEWS -</p>
<div class="expandable1 panel1" id="one">
[content]
</div>

JS:

        $(".button").show();
        $('.plus1').toggle(function(){
            $("#one").slideDown(
            function(){
                $(".plus1").text("NEWS -")
            }
            );
        },function(){
            $("#one").slideUp(
                function(){
                    $(".plus1").text("NEWS +")
                }
            );
        });       [etc]

私の質問：

css を使用して以下を制御するにはどうすればよいですか。

例えば：

page A- expandable1 is expanded, expandable2 collapsed 
page B- expandable1 is collapsed, expandable2 expanded 

など。約 6 から 8 のさまざまなページ構成があり、そのうちの 4 から 5 のセクション [expandables 1 から 6] をさまざまな組み合わせで表示する必要があります。

今のところ、上記のように {display:block/none,etc.} を使用できますが、JS ボタンが少し揺れます。