Wrapping rows in views-view-fields.tpl.php, when grouping fields, throws off js selectors

If you are using field grouping, and not using the field that's grouping the results, each resulting accordion is independent of the rest of the grouped results.

So if you have in one group an item opened, and you click on an item on another group, this doesn't affect the other group's opened item. this is by design.

If this is what you are seeing, this is not a bug. Again, it's hard to understand from just text what you mean, so if if this is not the case, please submit some screenshots which really help understand what's your problem.

Thanks for clarifying kdebass
This works just fine on my testing install, both using the latest beta3 and the latest dev version. So far I've been unable to replicate your problem.

Please provide a screenshot of the view settings with the accordion settings expanded, so I can attempt to recreate your settings and replicate exactly your situation.

Your settings look ok, the only thing that I can think of that could be causing this, is that perhaps trying to group by Taxonomy: All Terms could cause weird results. Try using the field Taxonomy: Term to group by. Although I have tried your setup, in a block display, using Taxonomy: All Terms as the field to group by, and I still see no problems, so I don't know what's wrong.

Another thing to check out would be if it is also happening if you use the module's default styling.

Have you tried using the latest dev version of the module? -- though for me it's working fine in both beta3 and dev...

Right, that could throw off the js selectors in views_accordion...

I suggest you add the class to an existing default div that views prints out, not adding extra divs. Not sure why you want that or how you will use it, but that's the general advice lookin at what you are running into...

Problem lies in that you are wrapping the whole fields inside another div. I think you want to tag each row on its own, so go something like this:

<?php
// $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $
/**
* @file views-view-fields.tpl.php
* Default simple view template to all the fields as a row.
*
* - $view: The view in use.
* - $fields: an array of $field objects. Each one contains:
*   - $field->content: The output of the field.
*   - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
*   - $field->class: The safe class id to use.
*   - $field->handler: The Views field handler object controlling this field. Do not use
*     var_export to dump this object, as it can't handle the recursion.
*   - $field->inline: Whether or not the field should be inline.
*   - $field->inline_html: either div or span based on the above flag.
*   - $field->separator: an optional separator that may appear before a field.
* - $row: The raw result object from the query, with all data it fetched.
*
* @ingroup views_templates
*/
$node_type = "node-type-" . $row->node_type;

?>
<?php foreach ($fields as $id => $field): ?>
  <?php if (!empty($field->separator)): ?>
    <?php print $field->separator; ?>
  <?php endif; ?>

  <<?php print $field->inline_html;?> class="views-field-<?php print $field->class; ?> <?php print $node_type; ?>">
    <?php if ($field->label): ?>
      <label class="views-label-<?php print $field->class; ?>">
        <?php print $field->label; ?>:
      </label>
    <?php endif; ?>
      <?php
      // $field->element_type is either SPAN or DIV depending upon whether or not
      // the field is a 'block' element type or 'inline' element type.
      ?>
      <<?php print $field->element_type; ?> class="field-content"><?php print $field->content; ?></<?php print $field->element_type; ?>>
  </<?php print $field->inline_html;?>>
<?php endforeach; ?>

That shouldn't mess with the js selectors when using grouping, and should get you what you want for styling.

The module provides similar classes, like this: views-accordion-item accordion-item-0 accordion-item-odd accordion-item-first
Please use firebug to see what's going on...

You are lucky today that I am feeling generous. The module provides you with all the tools necesary for custom theming, including your request.

You can use this views-accordion.tpl.php in your theme:

// $Id: views-view-accordion.tpl.php,v 1.1.2.3 2009/02/26 20:25:59 manuelgarcia Exp $
/**
 * @file
 * Displays the items of the accordion.
 *
 * @ingroup views_templates
 *
 *  Note that the accordion NEEDS <?php print $row ?> to be wrapped by an element, or it will hide all fields on all rows under the first field.
 *  Also, if you use field grouping and use the headers of the groups as the accordion headers, these NEED to be inside h3 tags exactly as below (though u can add classes)
 *
 *  The current div wraping each row gets two css classes, which should be enough for most cases:
 *     "views-accordion-item"
 *      and a unique per row class like item-0
 *
 */
?>
<div class="item-list views-accordion <?php print $views_accordion_id ?>">
  <?php if (!empty($title)): ?>
    <h3 class="<?php print $views_accordion_id ?>"><?php print $title; ?></h3>
  <?php endif; ?>
  <div id="<?php print $views_accordion_id ?>">
    <?php foreach ($rows as $id => $row): ?>
      <?php $classes[$id] = $classes[$id] .' node-type-'. $variables['view']->result[$id]->node_type; ?>
      <div class="<?php print $classes[$id] ?>"><?php print $row ?></div>
    <?php endforeach; ?>
  </div>
</div>

There is no need for an extra div, use proper css selectors like .views-accordion-item.node-type-story.

I insist you don't need an extra div for your case, but I do see your point in that we should try to not depend on standard markup.

I wouldn't still consider this a bug, since you are making modifications and introducing custom code, but I do see the advantage of having the script being smart enough to not care about what extra markup you have there. jQuery selectors can get very tricky with all the possibilities that views offers, and if you throw in custom theming... well, you can get the idea, not very fun to debug.

The day i offered support for field grouping on the module, I opened a can of worms it seems. The js is so much more complex just to account for all the different markup views is spitting out, including several divs with the same ID.

Nevertheless I worked on the problem for some time, and I think we've made some progress. Please do test the patch attached (against the latest dev), and let me know how it goes. I have tried testing several configurations, but no time to test every possible way of configuring views and/or the plugin, so help here is really appreciated. I'm concerned we might introduce new bugs with this approach, so I won't commit it until it's been tested properly and extensively.

True that supporting grouping does offer a lot of nice functionality.

By divs with the same id i mean

Any news on this people, we should get this well tested !

Apparently this isn't a priority for anyone, so I'm setting this as postponed.

I am running into the exact same problem. If I add any other div wrappers inside of this code it breaks the accordion. I need this as I am trying to separate the output of this page into a 2 columns layout. So when I add some additional markup to split this into 2 containers it breaks the accordion right where I add the new div. I tried to patch this but it seems to fail. Is there something I can do to get this to work??

This is inside the root views tpl file.

<?php

/**
 * @file
 * Main view template.
 *
 * Variables available:
 * - $classes_array: An array of classes determined in
 *   template_preprocess_views_view(). Default classes are:
 *     .view
 *     .view-[css_name]
 *     .view-id-[view_name]
 *     .view-display-id-[display_name]
 *     .view-dom-id-[dom_id]
 * - $classes: A string version of $classes_array for use in the class attribute
 * - $css_name: A css-safe version of the view name.
 * - $css_class: The user-specified classes names, if any
 * - $header: The view header
 * - $footer: The view footer
 * - $rows: The results of the view query, if any
 * - $empty: The empty text to display if the view is empty
 * - $pager: The pager next/prev links to display, if any
 * - $exposed: Exposed widget form/info to display
 * - $feed_icon: Feed icon to display, if any
 * - $more: A link to view more, if any
 *
 * @ingroup views_templates
 */


$rows = preg_replace('~>\s+<~', '><', $rows);
$rows = preg_replace('/[\r\n]+/', "\n", $rows);
$rows = preg_replace('/\s+/', ' ', $rows);

$rows = str_replace('<h3 class="views-accordion-clone_of_tax_test-page-header"> Health Care </h3>', '</div><div class="rightcol"><h3 class="views-accordion-clone_of_tax_test-page-header"> Health Care </h3>', $rows);





//print htmlspecialchars($rows);
?>
<div class="leftcol">
<div class="<?php print $classes; ?>">
  <?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <?php print $title; ?>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
  <?php if ($header): ?>
    <div class="view-header">
      <?php print $header; ?>
    </div>
  <?php endif; ?>

  <?php if ($exposed): ?>
    <div class="view-filters">
      <?php print $exposed; ?>
    </div>
  <?php endif; ?>

  <?php if ($attachment_before): ?>
    <div class="attachment attachment-before">
      <?php print $attachment_before; ?>
    </div>
  <?php endif; ?>

  <?php if ($rows): ?>
    <div class="view-content">
      <?php print $rows; ?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

  <?php if ($pager): ?>
    <?php print $pager; ?>
  <?php endif; ?>

  <?php if ($attachment_after): ?>
    <div class="attachment attachment-after">
      <?php print $attachment_after; ?>
    </div>
  <?php endif; ?>

  <?php if ($more): ?>
    <?php print $more; ?>
  <?php endif; ?>

  <?php if ($footer): ?>
    <div class="view-footer">
      <?php print $footer; ?>
    </div>
  <?php endif; ?>

  <?php if ($feed_icon): ?>
    <div class="feed-icon">
      <?php print $feed_icon; ?>
    </div>
  <?php endif; ?>

</div><?php /* class view */ ?>
</div> <!-- /leftcol -->

This is a screenshot of what it is now doing to my accordion once it sees the new div that I have added.