Best practice for adding "more" button to CCK content

bigknot33 - June 16, 2009 - 06:41

Hi,
This would be relatively easy to do outside Drupal, but I'm unsure how to accomplish it in Drupal.

I have a CCK field that is quite long (4 pages of text in some nodes). I'd like to be able to assign a "Read more" button at a point of my choosing.

Ideally, any text after this "breakpoint" would be hidden (via jQuery or plain old JavaScript). When the user clicks on it, the hidden content would be revealed.

This would be pretty easy to implement in jQuery, I guess, but I want something that can be used in a TinyMCE environment and can be added easily by non-technical users. That's really the main thing - I can do this myself easily, but it has to be easily addable by users.

Any thoughts?

HAve a look at

dddave - June 16, 2009 - 09:07

Thanks for the module

bigknot33 - June 17, 2009 - 01:51

I'm sure I'll use it sometime.

Since I wanted something that revealed content inline, I went a different way. Some people might be interested in how I did it, so here's what I did:

  1. created two CCK fields, one with the "teaser" and one with the extended text
  2. created a content-field.tpl.php file in my template to override the default cck field template (this page was incredibly helpful: http://tinyurl.com/themecck)
  3. replaced the default "print $item['view'] with a conditional statement to handle the extended text field differently, adding a "more publications_button" div above the "more publications" field:
    <?php if ($field_name != 'field_faculty_more_publications')
      print
    $item['view'];
     
    // if the 'more publications' field is present
      // show the 'read more' link
    elseif ($field_name == 'field_faculty_more_publications')
    {
      print
    '<div id="more_publications_button">View more publications...</div><div class="more_publications_toggle">';
      print
    $item['view'];
      print
    '</div>';
    }
    ?>

    I am not an amazing coder, so I'm sure this could be improved on. If I'm doing something alarmingly bad, I hope someone tells me.
  4. Styled the more button in CSS to make it more link-like, and hid the "more publications" link by default:
    .more_publications_toggle {
    display: none;
    }

    #more_publications_button {
    color:#000099;
    text-decoration:underline;
    cursor:pointer;
    margin-top: -10px;
    }
  5. Added some jQuery behaviour to the template.php file to create a slide-up/slide-down toggle for the "more publications" content:
    drupal_add_js (
      '$(document).ready(function(){
     
        var hello = 0;
        $("#more_publications_button").click(function() {
          if (hello == 0) {
            $(".more_publications_toggle").slideDown("medium");
            hello = 1;
          }
          else if (hello == 1) {
            $(".more_publications_toggle").slideUp("medium");
            hello = 0;
          }
      });

    }); ', 
    'inline');

Maybe there is an easier way, but this worked in the meantime. Any code critiques most helpful and appreciated! I don't want to lead other Drupal noobs like me astray ;)

 
 

Drupal is a registered trademark of Dries Buytaert.