Hide Text multiple times

Nikeszero · December 10, 2020, 7:52pm

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

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;
}

Nikeszero · December 10, 2020, 8:53pm

Yes! It works perfect! I tried to seperate it the wrong way.
Thank you!