I am in the process of constructing a webpage dedicated to learning Japanese vocabulary. Each word will be presented within a sentence, just like the example shown below.
森林に散歩する take a walk in the forest
In order to facilitate the practice of writing in ideograms, I have decided to display only the phonetic representation of each word. For instance, the previous sentence would appear as follows.
しんりんにさんぽする take a walk in the forest
Now, my goal is to enable users to click on "しんりん" to conceal it and reveal "森林," and vice versa. The CSS and HTML code snippet I have composed thus far looks something like this.
CSS
y { display: none; }
HTML
<y>森林</y><z>しんりん</z>にさんぽする take a walk in the forest
The underlying objective is essentially to toggle between z { display: none; }
and y { display: none; }
upon clicking the word.
Is it feasible to achieve this solely relying on CSS and HTML, or will Javascript be required?
While toggling all instances of <z>
or <y>
simultaneously may not pose much difficulty, I am seeking a method to switch exclusively between <z>
or <y>
pertaining to the clicked term.
Due to the large volume of sentences that will be featured on the page, assigning distinct IDs or classes for each word to target individually seems impractical.
All solutions I have come across involve utilizing an ID specific to the tag, or toggling all tags globally, leaving me perplexed about how to proceed.