2

This is my first S.O. question so thanks for taking a look. I'm open to ideas and criticisms of the constructive kind.

My issue is this: I have a jQuery UI Accordion Widget in the main content area, and a sidebar menu with links that need to correspond to each accordion header so there is a possibility of being able to deep-link from the left sidebar menu to an item in the accordion. Not the greatest UI, and defeats the purpose of the accordion in a way—this I already know. However, I still feel it would be useful to figure out this array functionality for other applications.

The website is in Wordpress, so the accordion elements and sidebar links will be added or removed by the client using a custom post type. Therefore, this is the approach I've settled on (using arrays). Please let me know if you can think of an easier/more efficient way to handle the issue.

My accordion code looks like this (I've stripped out the WP_Query loop for brevity):

<div id="accordion">
  <h1><?php the_title(); ?></h1>
  <div><?php the_content(); ?></div>
</div>

My left sidebar code looks like this (again, I've stripped out the loop):

<ul class="resources-nav">
  <li><a href=""><?php the_title(); ?></a></li>
</ul>

Now, when Wordpress and the accordion widget do their work on page load, they generate this code for the header element:

<h1 class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0">
  <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
  "The title from Wordpress"
</h1>

As you can see, it generates the header ID of id="ui-id-1". For each header element in the accordion, this ID changes to id="ui-id-3", then id="ui-id-5", etc. In order to deep-link from the left sidebar, I've decided to grab the ID attribute from each header element and put it into an array, like this:

jQuery(document).ready(function($) {

  var navLi = $('.resources-nav li a');
  var aHeader = $('#accordion h1');

  var n = []; // Sidebar nav items
  var a = []; // Accordion items

  //Get Nav items and store in an array
  $(navLi).each(function() {
    n.push($(this));
  });

  //Get Accordion header items and store in array
  $(aHeader).each(function() {
    var id = $(this).attr('id');
    a.push(id);
  });

  // Add id from each Accordion header to href="#" of each nav link.
  // This will create deep linking possibilities, right? Well...
  $.each(a, function(i, val) {
    console.log(i + ": " + val); //Just for me to see that it's working
    $(navLi).attr('href', '#'+val);
  });

});

As you can hopefully see, I'm trying to map each individual ID in the a array to each individual link in the sidebar. However, my result ends up being that it only adds the final ID in the array to each href="#", like this:

  <li>
    <a href="#ui-id-33">Title of Post</a>
  </li>
  <li>
    <a href="#ui-id-33">Title of Post</a>
  </li>

Any ideas why this is not working?

1
  • I know the question is about jQuery UI, but just in case someone stumbles across this question. I created a little jQuery script independend from jQuery UI which allows deeplinking, even when JS is disabled (need to be set up server side for this to work e.g. PHP). All described in the readme. Because it's my first repo and published script I would love to get comments/commits on it :-) pushStateAccordion
    – Can Rau
    Jun 29, 2015 at 23:35

1 Answer 1

0

You don't need to make extra arrays just to store the elements, jQuery already does this whenever you create a collection of elements with $(selector);

Your main problem is in the last each. You are setting the attr for the whole collection of navLi on each loop of each so only the last value of the last pass will be applied. You also never use the n array you create.

You can fix it by using eq() method to target the correct indexed navLi element.

$.each(a, function(i, val) {
    console.log(i + ": " + val); //Just for me to see that it's working
    navLi.eq(i).attr('href', '#'+val); /*  no need to wrap navLi in $() again */
  });

Assuming that there is a 1:1 relationship between sidebar and accordion you can simplify the whole code down to:

jQuery(document).ready(function ($) {
    var aHeader = $('#accordion h1');
    $('.resources-nav li a').attr('href', function (index, elem) {
        return '#' + aHeader[index].id;
    });
});
1
  • no problem, think of jQuery objects as arrays of elements
    – charlietfl
    Jul 5, 2014 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.