I have a jQuery collapsing menu feature that I want my client to easily be able to create. The only thing that needs to be done is adding two styles to their text. One is the header of the menu, the other is the collapsing content.
I'm using WYGWAM and here are my custom styles:
CKEDITOR.stylesSet.add( 'my_styles',
[
// Block Styles
{ name: 'Heading 1', element: 'h1'},
{ name: 'Heading 4', element: 'h4'},
{ name: 'Default Copy', element: 'p'},
{ name: 'Accordion Header', element: 'div', attributes: {'class': 'accordion-header'}},
{ name: 'Accordion Content', element: 'div', attributes: {'class': 'accordion-content'}}
]);
The problem is any time I try and apply the accordion styles they wrap everything within them. In the instance of trying to add bullets as content... It'll turn into:
<div class="accordion-header">Header Text</div>
<p class="accordion-content">
<li class="accordion-content">List item</li>
<li class="accordion-content">List item</li>
<li class="accordion-content">List item</li>
<li class="accordion-content">List item</li>
</p>
It just automatically adds p tags then applies my custom class to every element within. Ckeditor is being a pain. Any advice?