How to make read more option with CSS in TinyMCE (homepage editor)

[zdeneklogin]

I use this code for "read more" option (see bellow), it works perfectly in different eshop system

But it does not work in prestashop text editor. Text is not unrolled. I have already extended tinymce to rich editor. 

 

How to change tinymce configuration code ?

 

HTML

<input type="checkbox" class="unpack" id="box" />

<div class="unpack"><label for="box"></label>

 <div class="hiden-text">hello world hello world hello world</div>

 

CSS

input.unpack {display: none;}

input[type=checkbox]:checked + .unpack .hiden-text {display: block}

.unpack > .hiden-text {display: none}

 

 

.unpack > label {

  display: block; cursor: pointer; background:#f5f5f5; color: #f5f5f5; padding: .5em

}

input[type=checkbox]:checked + .unpack label {background: #f5f5f5;}

 

.unpack > label:before {

  content: "read more"; background: #f5f5f5; color: red; padding: 0 .3em; margin-right: .5em; border-radius: 3px

}

input[type=checkbox]:checked + .unpack label:before {content: "close text"; color: red; font-weight: strong; font-size: 14px}

 

 

[vekia]

if you save this code in the editor - it is different after save?

[zdeneklogin]

The code is still the same after save. 

[vekia]

can you past here full code that you put into the editor, please?

[zdeneklogin]

I put this code (through "source code" button)

 

 <input type="checkbox" class="unpack" id="box" />

<div class="unpack"><label for="box"></label>

<div class="hiden-text">hello world hello world hello world</div>

 

But I see only "read more" link and nothing happens after click

[vekia]

where is the rest of the code?

this code does nothing

 

it is necessary to use some js code too to make it work

[zdeneklogin]

this is css solution, you do not need any js,

 

as I wrote in my first post = first part of code ("hmtl") I put to the editor a second part ("CSS") to CSS

 

This method works perfectly in other editors what I use... so there have to be some bad setting in tinymce configuration code

[zdeneklogin]

in tinymce editor the code does not work in desktop but it works in android...

 

any idea how to modify tinymce code ?

 

OR do you have different solution for "read more" option (using of js, css,...)