Hi! Im trying to Group some things with the “Hide function”.
I got something like this in my Passage:
<<link "Normal">>
<<toggleclass "#text" "hide">>
<</link>>:
<span id="text" class="hide">
Normal Targets
</span>
<<link "Rare">>
<<toggleclass "#text" "hiderare">>
<</link>>:
<span id="text" class="hiderare">
Rare Targets
</span>
and in my Stylesheet this:
.hide {
display: none;
}
.hiderare {
display: none;
}
But if I try to do more of these on the same Passage its not working.
I tried to seperate it in my Stylesheet but I couldnt figure out whats wrong with it.
Hope someone can help me.
Greyelf
December 10, 2020, 8:10pm
#2
The HTML element ID included on a page needs to be unique. Also you can achieve the result yon want using a single CSS class.
1: Change your Passage content to something like the following, notice that each of the <span>
elements has a unique ID assigned to it.
<<link "Normal">>
<<toggleclass "#normal" "hide">>
<</link>>:
<span id="normal" class="hide">
Normal Targets
</span>
<<link "Rare">>
<<toggleclass "#rare" "hide">>
<</link>>:
<span id="rare" class="hide">
Rare Targets
</span>
2: Delete the .hiderare
CSS class selector base rule from your project’s Story Stylesheet area, you only need to .hide
class selector base rule.
.hide {
display: none;
}
Yes! It works perfect! I tried to seperate it the wrong way.
Thank you!