show toolbar when editor is focused then hide it

Question

I am using toolbar and editor of textangular in my website.I have one question which confused me a lot. In my page I have some editors ,and each editor has its own toolbar.my purpose will be ,when editor 1 is focused, toolbar1 is shown and other toolbars hidden.when editor2 is focused just toolbar2 is shown and others hidden an so on.how can I manage it.I saw link below but this solution just works for hiding and showing all the toolbar with each other not one by one, so it is not useful for me. NOTE I want all the toolbars to be hidden in the load of the page. I attach one image in my question to be more clear.

Show TextAngular toolbar only when editor is in focus for multiple editors with 1 toolbar

Answer 1

I'm not familiar TextAngular, but in general: You can do this using just CSS with :focus pseudo-class and the + adjacent sibling selector.

HTML:

<div class="container">
  <textarea></textarea>
  <div class="toolbar"></div>
</div>
<div class="container">
  <textarea></textarea>
  <div class="toolbar"></div>
</div>
<div class="container">
  <textarea></textarea>
  <div class="toolbar"></div>
</div>

CSS:

.container {
  width: 400px;
  height: 250px;
  position: relative;
  margin-bottom: 50px;
  padding-top: 30px;
  border: 1px solid black
}

textarea {
  width: 100%;
  height: 100%;
}

.toolbar {
  width: 100%;
  height: 30px;
  background: pink;
  position: absolute;
  top: 0;
  display: none;
}

textarea:focus + .toolbar {
  display: block;
}

See: http://jsbin.com/qefokebaqe/edit?html,css,output

Note : this relies on the markup being in a certain order. (Hopefully the TextAngular setup you're using allows for this) The toolbar must be after the textarea, and it must be a sibling. You can use + if it is an immediate sibling, or ~ if it is a later sibling: textarea:focus ~ .toolbar

See: Is there a "previous sibling" CSS selector?