Linking to specific Views Accordion rows (and opening them)

We are currently building a site for a client where there is a need to group a number of relatively short pieces of content together on one page. A regular list of titles or teasers, which link to individual nodes, would require another level to traverse which felt unnecessary, so we considered ways in which to ease the presentation on the one page. Having used Views Accordion before in similar scenarios this seemed like an appropriate solution (see, for example http://tescopoly.org/faq - which has additional grouping of the node content "by term").

In the case of our current job, we had the additional requirement to be able to target each row individually using an anchor, make the browser scroll to the row in question and then open the row to display the content.

By default Views Accordion does provide anchors - however these are generated based on the row's position, so we get anchors that look like #faq-page-0 - ie the first row output by the query. In the event that the order of the rows would never, ever, change, this might be ok to use. However, if there is any possibility that rows could be re-ordered (eg new rows added, weighting changes, or other re-ordering such as a change to the Views query's ORDER BY (sort) ), then this approach is a bit useless.

Luckily there has been some discussion about this already here, https://drupal.org/node/1127224 .The patch created by jantoine at https://drupal.org/comment/5919394#comment-5919394 seems fairly straightforward - get additional data about the item being linked to, rewrite the anchors to match - so we decided to go ahead and try it.

We applied the patch to Views Accordion 7.x-1.0-rc2 (on Drupal 7.25) and, after a quick drush cc all, we could see anchors now in the form of <view_machine_name-view_display_name-result_entity_type-results_entity_id> in our case that equated to, for example, #taxonomy_term-page-node-48 which means that now, irrespective of the targeted row's position in the query, we can always link to it.

We benefited from GHaddon's suggestion at https://drupal.org/comment/5919394#comment-5919394 in order to oblige browsers to scroll to (or at least near to!) the targeted row. In our case that meant adding a field for the nid, excluding the original title from display, and rewriting the nid field as

<h3 id="#taxonomy_term-page-node-[nid]">[title]</h3>.

So far, so good, we could target rows irrespective of their position and get the browser to scroll to the targeted row.

Now the last piece of the puzzle was to persuade the row to open and reveal its contents. Normally when the user clicks on a row header a jquery function is triggered to open the row. However, because no actual "clicking" was being done the row would not open. A solution for this was found while trawling the Views Accordion issue queue for similar topics. The last suggestion at https://drupal.org/comment/2075330#comment-2075330 is to add a little bit of jquery to the view's footer, not that the detail of the element was of help, but the principle was (kind of obvious - and we have used similar approach on previous projects - but somehow it hadn't entered my head this time!).

So, in order to "click" the targeted row we added the following to our view's footer (make sure full html or equivalent format is selected):

<script type = "text/javascript">
(function ($) {
$(document).ready(function(){
$('.views-accordion-header:has(a[href$='+location.hash+'])').click();
});
}(jQuery));
</script>

Very simple: this says if the row header has a link that matches the anchor given in the browser's path (note location.hash) then "click" it.

So there we have it - a little recipe to target individual Views Accordion rows, scroll to and then open it. Happy cooking :)

ps - we will update this post with a link to the site in question once it has been launched...

Postscript: The site mentioned was launched almost a year ago now, but you can find it here: http://www.colnevalleypark.org.uk - the patch (updated 11 months ago and posted here https://www.drupal.org/node/1127224#comment-8848837 by Andreas) will just about apply to the latest Views Accordion (7.x-1.1) - though its a few lines adrift it will succeed.

Additional info on this project:
http://netuxo.co.uk/portfolio/colne-valley-park
http://netuxo.co.uk/blog/ippy-gray/everyday-militarism-and-walk-park