javascript - How to add a button on TinyMCE to toggle toolbar visibility? -


i have 2 toolbars on tinymce editor (2 rows) , want add button on first toolbar shows/hides 2nd toolbar.

basically expand / collapse button. default 2nd toolbar invisible when button clicked shown. button should change icon (something chevron-down chevron-up) , when clicked again should hide 2nd toolbar.

it static button says advanced options show/hide 2nd toolbar.

i didn't find tinymce plugin achieves this. know how implement or plugin (or close it) ?

tinymce not have apis can based on classes tinymce places on divs contain each toolbar.

if @ divs tinymce uses render toolbars see this:

<div id="mceu_41" class="mce-container mce-toolbar mce-stack-layout-item  mce-first" role="toolbar"></div> <div id="mceu_49" class="mce-container mce-toolbar mce-stack-layout-item  mce-last" role="toolbar"></div> 

(i omitting whole bunch of html in each of these divs)

the last row of toolbars have classes mce-toolbar , mce-last. using jquery can show/hide div toggle() method. make toolbar button , add first row of toolbar buttons:

editor.addbutton('hidetoolbar2', {     text: 'hide toolbar 2',     onclick: function () {          $('div.mce-toolbar.mce-last').toggle();     } }); 

...and...

tinymce.init({   selector: 'textarea',   ...   toolbar: [     "hidetoolbar2 | insertfile...",     "removeformat | fontsizeselect..."   ],   ... }