I've written a plugin that pops up a window and let's a user type in titles and text, it then generates the code necessary to make expandable / collapsible sections.
See http://dev1.hrs.wsu.edu/dave%20test%205 for an example of the code below in action.
The code below was generated by the user using the plugin twice. The first time with a checkbox set to generate the outer dotted box and expand all / collapse all links. The second time without that checkbox. This resulted in two "title / text" sections.
The problem is, I have to have the code insert a break after each TEXT section (<!--/Text--> <br />) or the user would never be able to insert another section after the first, reason being is that FCK Editor does not allow a user to put the cursor in the area between the ending div for the last text section and the ending div of the container, at least not without a space or br there.
The real problem is that the users end up deleting the br (or the editor does if you switch to code view) and then they can never insert more sections into that container, at least without switching to code view and inserting another br (which most of them are not capable of)
I've attached an image showing the problem in the editor, notice the orange text where you can not click (without a BR).
Does anyone have any suggestions on how to resolve this? How can I make this better? Please help.
<p> <div class="collapsiblePanel_Openlinks"><a class="ExpandSectionsT" title="Open All Sections" href="#">Expand all</a> | <a class="CollapsSectionsT" title="Close All Sections" href="#">Collapse all</a></div> <div class="collapsiblePanel_Container"> <div class="collapsiblePanel_Title"> <div class="cpTitleLeft">Test Title 1</div> <div class="cpTitleRight">2/12/2009</div> </div><!--/Title--> <div class="collapsiblePanel_Text"> <p>First bit of text</p> </div><!--/Text--> <div class="collapsiblePanel_Title"> <div class="cpTitleLeft">Test Title 2</div> <div class="cpTitleRight">2/10/2009</div> </div><!--/Title--> <div class="collapsiblePanel_Text"> <p>Even more text</p> </div><!--/Text--> <br /> </div><!--/Container--> <div class="collapsiblePanel_Openlinks"><a class="ExpandSectionsB" title="Open All Sections" href="#">Expand all</a> | <a class="CollapsSectionsB" title="Close All Sections" href="#">Collapse all</a></div> </p>
Re: DIV problem, impossible to edit text with two div containers