Hide phonenumber fields data

Public

Example: http://jsfiddle.net/vistar/fBSG3/

For this:
1. Add text field named "phone".

2. Insert to template.php:

</> CopyGet raw version
php
  1. function MYTHEME_field__field_phone {
  2. .......
  3. $output .= '<div class="field-items"' . $vars['content_attributes'] . '>';
  4. foreach ($vars['items'] as $delta => $item) {
  5. $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
  6. $output .= '<div class="' . $classes . '"' . $vars['item_attributes'][$delta] . ' data-last="' . drupal_render($item) . '"' . '>' . '+7-XXX-XXX-XX-XX' . '</div>'; //$item to data-last, text is XXX
  7. }
  8. $output .= l(t('Show phonenumber(s)'), '#', array('external' => TRUE, 'attributes'=>array('class'=>'show-phone'))) . '</div>'; // link for showing
  9. .........
  10. }

3. Add jQuery script for showing

</> CopyGet raw version
javascript
  1. jQuery(document).ready(function($) {
  2. $('.show-phone').click(function() {
  3. $('.field-phone .field-item').each(function(){
  4. $(this).text( $(this).data('last') );
  5. });
  6. $(this).hide();
  7. return false;
  8. });
  9. });

HTML result

</> CopyGet raw version
php
  1. <section class="field-phone">
  2. <h2 class="field-label">Phone(s):&nbsp;</h2>
  3. <div class="field-items">
  4. <div data-last="+7-123-456-72-90" class="field-item">+7-XXX-XXX-XX-XX</div>
  5. <div data-last="+7-012-345-67-89" class="field-item">+7-XXX-XXX-XX-XX</div>
  6. <a class="show-phone" href="#">show number(s)</a>
  7. </div>
  8. </section>

Comments

Don's picture

Hi,
How to do did when using Views?

ebhos's picture

Please i am unable to get this to work. I pasted the code above into the template.php file that i created for my theme because, mytheme dont have 1. I am not sure where to place the jquery code in between the php tag or in a ,/script> please any help will be appreciated as i need this to work for the project i am working on

VVS's picture

See my full function in template.tpl.php:

  1. function MYTHEME_field__field_phone($vars) {
  2. $output = '';
  3.  
  4. // Render the label, if it's not hidden.
  5. if (!$vars['label_hidden']) {
  6. $output .= '<h2 class="field-label"' . $vars['title_attributes'] . '>' . $vars['label'] . ':&nbsp;</h2>';
  7. }
  8.  
  9. // Render the items.
  10. $output .= '<div class="field-items"' . $vars['content_attributes'] . '>';
  11. foreach ($vars['items'] as $delta => $item) {
  12. $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
  13. $output .= '<div class="' . $classes . '"' . $vars['item_attributes'][$delta] . ' data-last="' . drupal_render($item) . '"' . '>' . '+7-XXX-XXX-XX-XX' . '</div>';//$item to data-last, text is XXX
  14. }
  15. $output .= l(t('Show phonenumber(s)'), '#', array('external' => TRUE, 'attributes'=>array('class'=>'show-phone'))) . '</div>';// link for showing
  16.  
  17. // Render the top-level wrapper element.
  18. $tag = $vars['tag'];
  19. $output = "<$tag class=\"" . $vars['classes'] . '"' . $vars['attributes'] . '>' . $output . "</$tag>";
  20.  
  21. return $output;
  22. }

and in script.js:

  1. jQuery(document).ready(function($) {
  2. $('.show-phone').click(function() {
  3. $('.field-phone .field-item').each(function(){
  4. $(this).text( $(this).data('last') );
  5. });
  6. $(this).hide();
  7. return false;
  8. });
  9. });

Change it for your field names (field_phone) and class names (field-phone).