element being erased by wordpress abd replaced with  

I am adding category descriptions to woocommerce. the descriptions look fine on desktop but are too long for a mobile device. As such, I am trying to show a snippet on mobile with the option of displaying more information. I am using code:

<div>
<input id=”post-1″ class=”read-more-state” type=”checkbox” />
<div class=”read-more-wrap”>
<h2>Heading</h2>
<p>Description Part 1</p>
<div class=”read-more-target”>
<div>Descpription part 2</div>
<div>Description Part 3</div>
</div>
</div>
<label for=”post-1″ class=”read-more-trigger”></label>
</div>

I am adding CSS:

.read-more-state {
display: none;
}

.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
content: ‘Show more’;
}

.read-more-state:checked ~ .read-more-trigger:before {
content: ‘Show less’;
}

.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}

The CSS seems to work great however after saving the code, when I check the wordpress backend it has replaced the label with   and showing like so:

<div>
<input id=”post-1″ class=”read-more-state” type=”checkbox” />
<div class=”read-more-wrap”>
<h2>Heading</h2>
<p>Description Part 1</p>
<div class=”read-more-target”>
<div>Descpription part 2</div>
<div>Description Part 3</div>
</div>
</div>
&nbsp;

</div>

To add the code rather than just type I am changing from the visual tab to the text tab.

Is there anyway I can prevent this and keep the label element in the code?

Read more here:: element being erased by wordpress abd replaced with  

Leave a Reply

Your email address will not be published. Required fields are marked *