Question

everyone.

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)

styles.css:

.noPhones{
    display: none;
}

The javascript (contacts.tpl):

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

My forms (contacts.tpl):

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

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

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

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

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

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

I need all the rows with class “noPhones” hidden until clicking the link.

Any help will be greatly appreciated!!

Thanks!

Answer 1

Toggling visibility in jQuery is straightforward:

function swapMyToggledDiv()
{
    $( ".noPhones" ).toggle();
}

If you apply an ID to your link, you can apply this action in the jQuery onready method:

$( function() {
    $( "#toggle_link" ).click( function() {
        $( ".noPhones" ).toggle();
    });
});