ターゲットによる文章切替

パターン1

ここの文章が変わります。
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

変わった文章です。
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

これを押すと文章が変わります

[[module css]]
#u-collapsible .unfolded,
#u-collapsible:target .folded{
display:none;
}
 
#u-collapsible:target .unfolded,
#u-collapsible .folded{
display:block;
}
[[/module]]
 
[[div id="u-collapsible"]]
[[div class="folded"]]
ここの文章が変わります。
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
[[/div]]
[[div class="unfolded"]]
変わった文章です。
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
[[/div]]
[[/div]]
 
[#u-collapsible これを押すと文章が変わります]

パターン2

説明: あいうえおかきくけこさしすせそたちつてとなにぬねの実験開始を押す前実験開始を押した後はひふえほまみむめもやゆよわをん1234567890ABCDEFGHIJKELMNOPQRSTUVWXYZ実験開始を押す前その2実験開始を押した後その2

実験開始を押す前その3実験開始を押した後その3

実験開始
実験開始(実験開始後消える)
実験開始(実験開始後出現)

[[module css]]
#u-change{
display:none;
}
#u-change ~ .changearea .a,
#u-change:target ~ .changearea .b{
display:inline;
 
}
 
#u-change:target ~ .changearea .a,
#u-change ~  .changearea .b{
display:none;
}
 
[[/module]]
[[div id="u-change"]]
[[/div]]
 
[[div class="changearea"]]
**説明:** あいうえおかきくけこさしすせそたちつてとなにぬねの[[span class="a"]]実験開始を押す前[[/span]][[span class="b"]]実験開始を押した後[[/span]]はひふえほまみむめもやゆよわをん1234567890ABCDEFGHIJKELMNOPQRSTUVWXYZ[[span class="a"]]実験開始を押す前その2[[/span]][[span class="b"]]実験開始を押した後その2[[/span]]
 
[[span class="a"]]実験開始を押す前その3[[/span]][[span class="b"]]実験開始を押した後その3[[/span]]
 
[#u-change 実験開始]
[[a href="#u-change" class="a"]]実験開始(実験開始後消える)[[/a]]
[[a href="#u-change" class="b"]]実験開始(実験開始後出現)[[/a]]
[[/div]]
[[div id="u-change"]]
[[/div]]
[[div class="changearea"]]
ここに文章を入れる
[[/div]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License