jsFiddle にｻﾝﾌﾟﾙを置きました｡
http://jsfiddle.net/a_kuma3/syc5xtha/embedded/result,js,html,css/

質問の文面からは､つまづきﾎﾟｲﾝﾄがよく分からないので､勝手に想像して書くと､ﾎﾟｲﾝﾄはふたつあると思います｡


まず､ﾀﾌﾞ表示｡
見た目は遷移しているわけですけれど､実際には全てのﾀﾌﾞの HTML が展開されていて､そのうちのひとつだけを表示している､というふうになってます｡


もうひとつは､条件を満たしたら､ってところでしょうか｡
ﾗｼﾞｵﾎﾞﾀﾝやﾌﾟﾙﾀﾞｳﾝﾘｽﾄﾎﾞｯｸｽをｸﾘｯｸしたときのｲﾍﾞﾝﾄは､ﾃﾞﾌｫﾙﾄで上位のﾀｸﾞにも伝搬します｡
その上位の要素の onclick ｲﾍﾞﾝﾄのﾊﾝﾄﾞﾗで､ｸﾘｯｸされた要素を調べて､内容が設定されたかどうかを保持しておきます｡
ｸﾘｯｸされるたびに､全体の内容が指定された要素の状態を調べて､表示すべきﾀﾌﾞがどれか､という判定をして､そのﾀﾌﾞを表示する､というような流れです｡