What
Where
photosmarinavlad  

 

Didenko Family

© 2006-2021 Vlad Didenko

ALL RIGHTS RESERVED

The content rights are not available for sale or licensing. Any use of the content except by the website owners is prohibited, unless specified per-page otherwise, or agreed in writing otherwise.

This website is for personal photos and posts, for the benefit of family and friends. As such it has a minimal needed set of features. No backward compatibility with old browsers is considered.

Most photos are processed to match a personal perception at the time of capture, and some photos are processed creatively. No guarantees presented about photos resemblibling a reality in any sense. No guarantees presented that a technology or a personal advice and information posted on the website is usefull or harmless for your environment.

The Accordion Experience

While at the TAE in Boston, I have tried to use the accordion widget «on the spot» to organize my conference notes. I have looked up the Accordion documentation and put the code together. It did not work. After a brief conversation with Richard Worth (thank you, Richard!) it turned out that I did not read well enough into the Accordion’s assumptions on the DOM structure. The documentation touches well on the «standard» cases of using lists, but it was unclear on how to use it with structure based on divs, or other elements.

In case it may someone else, here what I now understand:

Accordions being created on a jQuery object. To avoid visual surprises, each element to be made an accordion should have a set of children elements, which will become the accordion’s items. E.g.:

<div id="my_accordion">
  <div>...</div>
  <div>...</div>
  ...
  <div>...</div>
</div>
<script type="text/javascript" charset="utf-8">
  $('#my_accordion').accordion(...)
</script>

My wrong assumption was that anything inside the item’s <div> would become content, and a header’s text just extracted. However, each item must have exactly two elements - the first one for the header, and the second one for the content. The first element needs to be queryable. The second element apparently does not have to be marked in any special way:

<div class="accordion_item">
  <h3>....</h3>
  <div>...</div>
</div>

With that infrastructure in place it is a simple call to create an accordion (add other options to taste):

$("div#my_accordion").accordion({ header: "h3" });

My next task was to allow all items to be collapsed. Since the application was to allow for easy reading of the conference notes, I wanted the items to collapse, when clicked on the active item’s header, so the whole list of sessions can be reviewed. That is done with the «alwaysOpen: false» parameter, while the «active: false» parameter creates the accordion initially closed:

$("div#my_accordion").accordion({
  active:     false,
  alwaysOpen: false,
  autoHeight: false,
  header:     "h3"
});

Hope that helps someone dealing with the Accordion widget the first time.

2008-10-04

 ∽   ⦾   ∽