Accordion HTML issue between visual/text editor

[AshleyF]

Hello,

On a previous support topic you kindly provided me with the HTML for the accordian which you updated recently. You gave me…

<div id="my-accordion" class="x-accordion">
	<div class="x-accordion-group">
		<div class="x-accordion-heading"><a id="tab-5b0442250fe44" class="x-accordion-toggle collapsed" role="tab" data-x-toggle="collapse-b" data-x-toggleable="5b0442250fe44" aria-selected="false" aria-expanded="false" aria-controls="panel-5b0442250fe44" my-accordion="">Accordion Title</a></div>
		<div id="panel-5b0442250fe44" class="x-accordion-body x-collapsed" role="tabpanel" data-x-toggle-collapse="1" data-x-toggleable="5b0442250fe44" aria-hidden="true" aria-labelledby="tab-5b0442250fe44" style="">
			<div class="x-accordion-inner">Your text here</div>
		</div>
	</div>
</div>

Now this does work, but what I am finding is when I switch between text and visual editing mode in Wordpress it messes the code up. What it does is it moves the closing < / a > from after the accordion title, to before it.

Is this something you’re aware of? I will use the shortcode on one page for now, but if there is a HTML fix for this I would welcome as I have a page with lots of accordions.

Regards, Ashley.

[mldarshana]

Hi Ashley,

Thanks for writing in! That is default behavior of WordPress editor. When you’re switching between Text and Visual modes, it may cause unusual issues.

The best way is to edit within Text mode, so that you can see the actual HTML added to the page.

Thanks!