KSS Opener: Events

Ability to add own reaction and/or prevent default reaction is described in KSS Opener events post:

Besides defining ":opener-init" even that initializes opener, developer has ability to extend/override open/close events:

.term:opener-init{
  evt-init-elementSelector: '.details';
}

.term:opener-open{
  action-client: executeCommand;
  executeCommand-commandName: replaceInnerHTML;
  executeCommand-commandSelector: '#status';
  executeCommand-html: 'expanded';
}

.term:opener-close{
  action-client: executeCommand;
  executeCommand-commandName: replaceInnerHTML;
  executeCommand-commandSelector: '#status';
  executeCommand-html: 'collapsed';
}

and HTML for the samle is:

<hr />
<div id="status">Current status</div>
<hr />

<div class="term">
  History
  <div class="details">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
    iaculis eros eu purus. Integer accumsan leo id lorem viverra vulputate.
    Donec feugiat nunc molestie massa nonummy pulvinar. Proin porta pede
    sit amet lectus. Duis leo urna, tempor non, condimentum condimentum,
    commodo non, libero. Integer feugiat, pede at.
  </div>
</div>

The resulting behaviour on page is:

If you do not see a flash movie above, see original post.

The important thing is that on open and close you can have client-side or server-side actions. You can disable default expand/collapse behaviour, with preventDefault parameter:

.term:opener-open{
  preventDefault: true;
}