Question : toggle hide/show several similar css classes on web page

Hello Experts,

I am puzzled on this as I cannot find sample code to do what I need.

Here is the scenario:

I have a table of content, i.e.

<table>
 <tr>
   <td>  
        <p class="ySports">sports content </p>
        <p class="noSports">non sports content</p>
        <p class="noSports">non sports content </p>
        <p class="ySports">sports content </p>
       <p class="ySports"> sports content </p>
 </td>
 <td>  
        <p class="ySports">sports content </p>
        <p class="noSports">non sports content</p>
        <p class="noSports">non sports content </p>
        <p class="ySports">sports content </p>
       <p class="ySports"> sports content </p>
 </td>
</tr>
</table>

I need to show both sports and non-sports content, only sports content, only non-sports content by using a script function using css classes to show or hide the respective content. I can find several examples toggling one block on content using the css id tag but since similar id tags can only be used once on a page I cannot have multiple ids with the same name. I need to use classes. (or some other method).

Thanks!

Answer : toggle hide/show several similar css classes on web page

sure, i have put it all in one page .. check attached file.

form.html (1 KB)  (File Type Details) 

html file with prototype usage