Styles not being applied correctly

Question

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?

Answer 1

Personally, I would avoid having the accordion markup itself done in the Wygwam field. I've done this sort of thing before, and there's a lot of things a client can do incorrectly that way. The way I would suggest you consider doing it is with Matrix, adding a row for each element of the accordion. That way, markup is exclusively in the template and you can protect the client from making a mistake. You could still potentially use Wygwam as the field in Matrix in which they place the accordion item content. That's my suggestion anyway, for what it's worth.

Answer 2

I would look into adding custom templates to Wygwam via CKEditor templates.

You could then add a template that would enable the client to introduce the following markup in a Wygwam field:

<div class="accordion-header">Header Text</div>
<ul class="accordion-content">
<li>Listem Item 1</li>
<li>List item 2</li>
<li>Etc...</li>
</ul>

The client could then introduce any additional items they need to the list by hitting "return" after the last item.

Hope that wasn't too confusing. Please let me know if you have questions!