Unhide / hide a class
<p>everyone. </p>

<p>I'm trying to use an a href link to "onclick" toggle unhide and hide. I've tried using jQuery, javascript functions, but I just don't seem to know quite enough to make it work. I've gotten close. This is what I have now (my 8th or so attempt)</p>

<p>styles.css:</p>

<pre><code>.noPhones{
    display: none;
}
</code></pre>

<p>The javascript (contacts.tpl):</p>

<pre><code>{literal}
&lt;script type="text/javascript"&gt;
function swapMyToggledDiv()
{
if(document.getElementById(".noPhones").style.display == "none")
{
document.getElementById(".noPhones").style.display = "block";
}
else
{
document.getElementById(".noPhones").style.display = "none";
}&lt;/script&gt;
{/literal}
</code></pre>

<p>My forms (contacts.tpl):</p>

<pre><code>        &lt;tr&gt;&lt;td&gt;
            &lt;h2&gt;&lt;a href="#" onclick="swapMyToggledDiv()"&gt;Phone&lt;/a&gt;&lt;/h2&gt;
        &lt;/td&gt;&lt;td&gt;
            &lt;input type="hidden" name="phone[contactId]" value="{$userData.contact_id}" /&gt;
            &lt;input type="text" name="phone[tel]" size="25" value="{$userData.telTel}" /&gt;
        &lt;/td&gt;&lt;/tr&gt;

        &lt;tr class="noPhones"&gt;&lt;td&gt;
            &lt;h2&gt;Cell #&lt;/h2&gt;
        &lt;/td&gt;&lt;td&gt;
            &lt;input type="text" name="phone[cell]" size="25" value="{$userData.telCell}" /&gt;
        &lt;/td&gt;&lt;/tr&gt;

        &lt;tr class="noPhones"&gt;&lt;td&gt;
            &lt;h2&gt;Work #&lt;/h2&gt;
        &lt;/td&gt;&lt;td&gt;
            &lt;input type="text" name="phone[work]" size="25" value="{$userData.telWork}" /&gt;
        &lt;/td&gt;&lt;/tr&gt;

        &lt;tr class="noPhones"&gt;&lt;td&gt;
            &lt;h2&gt;Home #&lt;/h2&gt;
        &lt;/td&gt;&lt;td&gt;
            &lt;input type="text" name="phone[home]" size="25" value="{$userData.telHome}" /&gt;
        &lt;/td&gt;&lt;/tr&gt;

        &lt;tr class="noPhones"&gt;&lt;td&gt;
            &lt;h2&gt;Pager #&lt;/h2&gt;
        &lt;/td&gt;&lt;td&gt;
            &lt;input type="text" name="phone[pager]" size="25" value="{$userData.telPager}" /&gt;
        &lt;/td&gt;&lt;/tr&gt;

        &lt;tr class="noPhones"&gt;&lt;td&gt;
            &lt;h2&gt;Fax&lt;/h2&gt;
        &lt;/td&gt;&lt;td&gt;
            &lt;input type="text" name="phone[fax]" size="25" value="{$userData.telFax}" /&gt;
        &lt;/td&gt;&lt;/tr&gt;
</code></pre>

<p>I need all the rows with class "noPhones" hidden until clicking the link. </p>

<p>Any help will be greatly appreciated!!</p>

<p>Thanks!</p>
