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>
実行結果
表示切替ボタンを押すと
無事に切り替えできました。
日々精進。ほんならね~|ω・`)ノ