<!--//Начало//Ударные гласные-->
<style>
@media screen and (min-width: 540px) {
    body
details{
    float: right;
  display:block;
  background: #afc2d4;
  width:300px;
  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow:hidden;
  margin-bottom: 1.5rem;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
   display:block;
   padding: .3em 1em .3em .9em;
   border-bottom: 1px solid #e2e8f0;
   font-size:1.1em;
   cursor: pointer;
   position: relative;
}
summary:before {  
  top: .4em;
  right: .3em;
  color: transparent;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em;
  width: 1em;
  height: 1em;  
  content: "";
  position: absolute;
  transition: transform .5s;
}
details[open] > summary:before {
  transform: scale(1,-1);
}
summary ~ * {
   padding: 0 1em 10px 1.4em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
}
</style>

<details>
    <summary>Вставить ударные гласные</summary>
<center>
<input type="button" value="А́" name="H" title="А́" onclick="bbcode('А́','')" />
<input type="button" value="а́" name="H" title="а́" onclick="bbcode('а́','')" />
<input type="button" value="Е́" name="H" title="Е́" onclick="bbcode('Е́','')" />
<input type="button" value="е́" name="H" title="е́" onclick="bbcode('е́','')" />
<input type="button" value="И́" name="H" title="И́" onclick="bbcode('И́','')" />
<input type="button" value="и́" name="H" title="и́" onclick="bbcode('и́','')" />
<input type="button" value="О́" name="H" title="О́" onclick="bbcode('О́','')" />
<input type="button" value="о́" name="H" title="о́" onclick="bbcode('о́','')" />
<input type="button" value="У́" name="H" title="У́" onclick="bbcode('У́','')" />
<input type="button" value="у́" name="H" title="у́" onclick="bbcode('у́','')" />
<input type="button" value="Ы́" name="H" title="Ы́" onclick="bbcode('Ы́','')" />
<input type="button" value="ы́" name="H" title="ы́" onclick="bbcode('ы́','')" />
<input type="button" value="Э́" name="H" title="Э́" onclick="bbcode('Э́','')" />
<input type="button" value="э́" name="H" title="э́" onclick="bbcode('э́','')" />
<input type="button" value="Ю́" name="H" title="Ю́" onclick="bbcode('Ю́','')" />
<input type="button" value="ю́" name="H" title="ю́" onclick="bbcode('ю́','')" />
<input type="button" value="Я́" name="H" title="Я́" onclick="bbcode('Я́','')" />
<input type="button" value="я́" name="H" title="я́" onclick="bbcode('я́','')" />
</center>
</details>
<!--//Конец//Ударные гласные-->