A button to make some "rt" text appear and disappear

Please check out the code below on a html5 webpage: <ruby><span style="font-family: BiauKai; font-size: 36pt;">我</span><rt style="font-family: 'Pinyin Sans'; font-size: 20pt;">wo</rt></ruby><ruby><span style="font-family: BiauKai; font-size: 36pt;">你</span><rt style="font-family: 'Pinyin Sans'; font-size: 20pt;">li</rt></ruby></span><ruby><span style="font-family: BiauKai; font-size: 36pt;">是</span><rt style="font-family: 'Pinyin Sans'; font-size: 20pt;">si</rt></ruby> Task 1: create a "hide" button to run a javascript to hide the <rt>...</rt> pinyin text. Task 2: create a "show" button to run a javascript to show the <rt>...</rt> pinyin text. Remark: at "hide" mode, the chinese characters(or texts) are kept to show at all time (in Biaukai fonts).