Blog / Drupal expand teaser to full body

We had the need to expand the teaser to full node body on click.

We created a view with both teaser and body, then we swap them with a bit of jQuery in the footer of the view: 

<script type="text/javascript">
if (Drupal.jsEnabled) {
  $(document).ready(function() {
    $('#campaign_overview').find('div.views-field-body').hide();
    //$('#campaign_overview').find('img').hide(); // can hide images in teaser, but we want them after all
    $('#toggle_teaser').click(function() {
      $('#campaign_overview').find('div.views-field-teaser').slideToggle('fast');
      $('#campaign_overview').find('div.views-field-body').slideToggle('fast');
      //$('#campaign_overview').find('img').slideToggle('fast');
      if ($('#toggle_teaser').html()=='<a href="#">[+] read more</a>') {
        $('#toggle_teaser').html('<a href="#">[-] read less</a>');
      }
      else {
        $('#toggle_teaser').html('<a href="#">[+] read more</a>');
      }
      return false;
    }); // $('#toggle_teaser').click(function()
  }) // end $(document).ready(function()
} //end if (Drupal.jsEnabled)
</script>

<div id="toggle_teaser"><a href="#">[+] read more</a></div>

Leave a comment

Sign up for updates