Views Accordion - Opening a specific row with a link

Submitted by madmatter23 on Wed, 04/13/2011 - 20:15

Goal: create link that goes to a new page and opens a specific accordion drawer.

Using the Views Accordion module in combination with a little custom code accomplished this. Here's a step by step guide.

Create your view

-add this header with input filter "php code":

<?php
  $view = views_get_current_view();
  $nid_arg = $view-> args[0];
?>
<?php if ($nid_arg): ?>
<div id="nid-argument"><?php print $nid_arg; ?></div>
<?php endif; ?>

-add a 'Global NULL' argument to the view.

-add the field 'Node: NID'. Rewrite the output of this field to be:

<a class="accordion-nid" name="accordion-nid-[nid]" id="accordion-nid-[nid]"></a>

If using views 3, I'd recommend setting all html wrapper, label, and html element settings to 'none'.

Add jQuery code to custom js script

-this can really be added anywhere as long as it's loaded on the view page

//open views accordion drawer based on GET argument
if ( $('#nid-argument') != ''){   
  vacc_nid = $('#nid-argument').html();    
  $('#accordion-nid-'+vacc_nid).parent().siblings('.accordion-header').trigger("click");
  $('html, body').animate({ scrollTop: $('#accordion-nid-'+vacc_nid).parent().siblings('.accordion-header').offset().top }, 500);
 
}

finally, add this css to hide the helper elements:

#nid-argument, .accordion-nid {
  display: none;
}

Now when you navigate to the URL my-view-path/[nid], it will open the accordion drawer with [nid].

It's messy, but it works, and it's not very resource intensive.

Tags:

Drupal Version Compatibility:

Comments

Anonymous

Tue, 03/27/2012 - 22:47

Great Post.

Add new comment

More information about text formats

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.