BuddyPress.org

I’m trying to create a tabbed interface in my theme so that each extended profile group displays in its own tab. There are different ways to do it, here is one: http://wordpress.org/plugins/buddypress-profile-tabs/

But I’m building this into a theme and don’t want to use a plugin (especially one that loads external JS). I did try using part of that plugin inside profile.php, but wasn’t happy with the result since the method it uses is to use JS to add #tab to each profile group. This results in a jumping of the page, even when I apply the CSS.

Chris Coyier has a better solution here: http://css-tricks.com/functional-css-tabs-revisited/
It doesn’t involve Javascript and it prevents the page jumping around to #links that the other solution causes.

Here is the problem I am having:
In order to use Chris’s solution I need to get the id’s of the input type of radio (shown in the code below) to read as id=”tab-1″, id=”tab-2″, etc for each profile group in the loop. I know there is a php way of doing it, but I don’t understand how. Once I get the id’s numbered sequentially in the output, adding the CSS is a simple issue.

<div class="profile-tab">
				
   <input type="radio" id="tab" name="profile-tab-group" checked>
      <label for="tab"><?php bp_the_profile_group_name(); ?></label>

   <table class="profile-fields">
      <?php while ( bp_profile_fields() ) : bp_the_profile_field(); ?>
         <?php if ( bp_field_has_data() ) : ?>
            <tr<?php bp_field_css_class(); ?>>
               <td class="label"><?php bp_the_profile_field_name(); ?></td>
               <td class="data"><?php bp_the_profile_field_value(); ?></td>
            </tr>
        <?php endif; ?>

         <?php do_action( 'bp_profile_field_item' ); ?>

      <?php endwhile; ?>

   </table> <!-- end profile-fields -->

</div> <!-- end profile-tab -->