Visualforceページにてstyle:dispalyで表示コンテンツを切り替えてみる

簡単にstyle:cssプロパティを利用した表示コンテンツの切り替えです。
commandbuttonのアクションでclassの showFlg値 を切り替えて、
ページ側のCSSを切り替えてあげる感じです。
切り替え部分はIF文を利用、ボタンを押したらRerenderで再描画します
以下のようにできました。

class

public class ShowHidePage {
    
    // public プロパティ
    public Boolean showFlg {get; set;}
    
    // コンストラクタ
    public ShowHidePage() {
        showFlg = false; // 最初は非表示
    }
    
    // 表示/非表示ボタン
    public PageReference toggleContent() {
        
        if (showFlg) {
            showFlg = false;
        } else {
            showFlg = true;
        }
        
        return null;
    }
    
}

Visualforce

<apex:page controller = "ShowHidePage">
    <apex:form id="form">
        <h1>表示/非表示 Visualforce サンプル</h1>
        <div id="contentToggle" style="display:{! if(showFlg, "block", "none")};">
            <p>表示/非表示を切り替えできるコンテンツです</p>
        </div>
        <div>
            <p>通常のコンテンツです</p>
        </div>
        <apex:commandbutton value="表示/非表示" action="{!toggleContent}" rerender="form" />
    </apex:form>
</apex:page>

実行結果

f:id:MNakayama:20160208142516j:plain

表示切替ボタンを押すと
f:id:MNakayama:20160208142520j:plain

無事に切り替えできました。
日々精進。ほんならね~|ω・`)ノ