I am working on a project where I have three separate divs that are set to be editable using the attribute contenteditable="true". Additionally, I have configured the redactor wysiwyg toolbar to remain fixed on the page.
Here is the structure in HTML:
<div id="toolbar_wrapper">
<div id="toolbar">
</div>
</div>
<div id="content">
<div class="redactor redactor1" contenteditable="true">
<h1>I am a Header</h1>
<p>I am a paragraph.</p>
</div>
<div class="redactor redactor2" contenteditable="true">
<h1>I am a Header</h1>
<p>I am a paragraph.</p>
</div>
<div class="redactor redactor3" contenteditable="true">
<h1>I am a Header</h1>
<p>I am a paragraph.</p>
</div>
For styling, here is the CSS snippet:
#toolbar {
position: fixed;
z-index: 10;
}
My challenge now is to make the redactor toolbar appear only when one of the divs (redactor1, redactor2, or redactor3) is clicked, and hide it when clicked outside those specific divs. Can anyone provide guidance on how to achieve this? Thank you.
You can view a sample code snippet on CodePen.