Hi Ryan. You keep JCE updated so well and have thought of pretty much everything that I'm going to ask what may be a stupid question, but I cannot figure out how to do this.

I have a very simple accordion for Q&A that uses CSS and HTML only. It doesn't require JS or anything else, and it's created "in" the article as opposed to a module, and it's not part of a plugin. I wanted that type to keep the speed up in the site.

The code surrounds the content and isn't rocket science, but I'm trying to figure out if JCE will allow me to edit in the "Editor" tab instead of the "Code" tab.

Mark up is not difficult, unless I'm doing a lot of that. In this instance I am. I've done about 7 questions and answers, and I'm already frustrated that I have to keep saving, go to the front end (or preview), then go back to the "Code" to adjust anything, or get the URL of a page to which I want to link.

I went through the settings and tried to enable "Custom CSS" to see if that would make a difference, and some other areas that I never touch. But I couldn't find anything that made any difference.

Is it possible to edit only the text in the <p></p> tag through the "Editor" tab? Adding the code to create another label and field for the question and answer is simple enough. It's the visible content that's a pain. I also cannot use the spellchecker because all the text is hidden when I switch to the "Editor" tab.
When I switch to the "Editor" tab, I see only the labels for each question. It's CSS driven, so it opens (in preview or the front end) when you click on the label. But in Editor, nothing happens when you attempt to click on a label.

I think you get the idea. Please let me know if you have a suggestion, or need to smack me because the answer is right in front of me.

Thank you.
Thomas

Hi.
Sorry for the delay.

Yes. The contents for the accordion are hidden by the collapsed labels. Only on the front end can you click on the label to get the tab to open.
That said, I've tried editing on the front end as well as in the back end with the same outcome.

I messed around a bit with the code you supplied, but it didn't make a difference.
I've never been able to edit anything in JCE that's controlled by CSS. I usually have to edit as I'm fairly certain is correct, then check on the front end to see the results. Until this accordion, I've never come across something that I spent as much time in editing so it was no big deal.

It's 100% CSS driven, and only uses div tags in addition to <p> tags for anything within the code.
There are only a couple of class tags that are different, and I targeted a few with no change.

You'll find the page here - https://www.garrisonbodyhealthnutrition.com/questions-answers - and since it's just div and CSS you can inspect to see the full code.
And you'll find the original code here in Code Pen - https://codepen.io/raubaca/pen/PZzpVe
I got it from - https://alvarotrigo.com/blog/css-accordion/ - it's the first one.

Most of the class tags are .qatab, but there are:
.qatabs
.qatab-content
.qatab-label

I tried qatab and qatabs and qatab-content (which I thought would be the obvious choice), but none of them addressed the issue.

Here's the original code:
<div class="qatabs">
<div class="qatab"><input name="qard" type="radio" id="rd1" /> <label for="rd1" class="qatab-label">This is text that is visible before clicking to see the content<br /></label>
<div class="qatab-content"><p>This is the content within the 1 tab selected,</p>
</div>
</div>
[additional tabs here before the last closing div]
</div>

Each of the additional fields would be duplicates of the "Label" and "Content" which would be before the last </div> tag.

I tried .mceContentBody .collapse { display:block; }, then tried .qatabs .collapse (and the other class tags named above), but I don't seem to be coming up with the right combination.
I'm currently working on it locally using Notepad++ to see if I can get anything different.

Thank you.

I tried an experiment today and it worked - for the most part.

I switched to MCE as the editor and the accordion displays perfectly within the editor.
When I say "perfectly" I mean it looks like any other article, but you cannot open and close each question / answer, and cannot select links from menus. The only way to get the link to an article is to close the article, get the link from the menu, return to the article and paste the link.

The number 1 reason I wanted to get the accordion to open in JCE was to use the access to the menu when linking in the accordion.

This is all to say I'm still not out of the woods.