[Kss-devel] KSS: Inline editing on multiple rows of data

[Jeroen Vloothuis]

Brian Gershon wrote:
> When I click, the forms open up for ALL rows.  Each row has a field  
> like this, and by default <div class="editform"> is hidden  
> via .hiddenform style:
>
> <div class="action-due-section">
>     <span class="action-due label">2008/02/25</span>
>     <div class="editform">
>        <input class="dueDateField" value="2008/02/25"/>
>        <input class="change" type="button" value="change"/>
>        <input class="cancel" type="button" value="cancel"/>
>     </div>
> </div>
>   
You could do something like:


/* show edit form when label clicked */
div.action-due-section span.label:click {
 evt-click-preventdefault: true;
 action-client: toggleClass;
 toggleClass-kssSelector: parentnode("div.editform");
 toggleClass-value: hiddenform;
}


Then you should make your CSS something like:

.hiddenform .editform {
  display: none;
}


The trick here is that you are actually toggling the class name on the 
outer div but you let the CSS rule apply through that. So after (and you 
probably want to have this a page load time as well) toggling the HTML 
would become:

<div class="action-due-section hiddenform">
    <span class="action-due label">2008/02/25</span>
    <div class="editform">
...  

Now if you look at the CSS snippet above you can see how it first 
selects .hiddenform and than any node below with the editform class name.