Skip to content. | Skip to navigation

Personal tools
Log in
Sections
You are here: Home Blogs Myroslav Opyr KSS Opener Open/close events of KSS Opener

Open/close events of KSS Opener

How to apply custom reaction to open/close events of KSS Opener. How to disable default expand/collapse behaviour.

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:

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;
}
Document Actions
Filed under:
comments powered by Disqus
Blogger: Myroslav Opyr

myroslav.jpg

Leave Testimonial

go here

Our RSS Feeds

Subscribe to our RSS feeds:

rss2-icon.png Quintagroup Blog
rss2-icon.png Python Blog
rss2-icon.png Plone Products
rss2-icon.png CMS.info Blog

Plone PDF brochure

Tag Cloud