JSFiddle - React, Tailwind, and code Playground
HTML
<div id="reqvotemem">
<div class="reqcomtovoteyes posabsl"><p onclick="openbox('boxcom'); return false" title="Оставить комментарий за">1</p>
<!--<div id="boxcom" class="toyes pm">
<div class="header">
<div class="blockname posabsl">
Комментарии против
</div>
</div>
<div class="comments">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5С‚</li>
</ul>
</div>
<div class="sendform">
<form name="sendcomment" method="post" action="input1.php">
<textarea name="comment" placeholder="26 символов максимум" form="sendcomment"></textarea>
<input type="reset" value="" title="Отправить">
</form>
</div>
</div-->
</div>
<div class="reqvoteyes posabsl" title="За принятие"></div>
<div class="reqvoteresult posabsl" title="60 из 100 проголосовали за">60%</div>
<div class="reqvoteno posabsl" title="Против принятия"></div>
<div class="reqcomtovoteno posabsl"><p onclick="openbox('boxcom'); return false" title="Оставить комментарий против">12</p>
<div id="boxcom" class="tono pm">
<div class="header">
<div class="blockname posabsl">
Комментарии против
</div>
</div>
<div class="comments">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5С‚</li>
</ul>
</div>
<div class="sendform">
<form name="sendcomment" method="post" action="input1.php">
...
CSS
#reqvotemem{
height:46px;
width:120px;
}
#reqvotemem > .reqcomtovoteyes{
background:url(bgcomvoteyes.png);
cursor:pointer;
font-size: 8px;
margin:-4px 0px;
height:17px;
z-index:3;
width:17px;
}
#reqvotemem > .reqcomtovoteyes > p{
height:17px;
cursor:pointer;
width:17px;
margin:5px 0px;
padding:0px 0px 0px 0px;
}
#reqvotemem > .reqcomtovoteyes > p:hover{
color:#c48e2c;
}
#reqvotemem > .reqcomtovoteyes > #boxcom{
background:#444444;
border:1px black solid;
display:none;
height:200px;
width:140px;
}
#reqvotemem > .reqcomtovoteyes > #boxcom > .header{
border-bottom:1px solid #808080;
margin:2px 5px 0px 5px;
height:14px;
width:130px;
}
#reqvotemem > .reqcomtovoteyes > #boxcom > .header > .blockname{
color:black;
font-size:13px;
margin:-3px 0px;
padding:0px 0px 3px;
width:130px;
}
#reqvotemem > .reqcomtovoteyes > #boxcom > .comments{
border-left:1px dashed #808080;
border-right:1px dashed #808080;
overflow-y:scroll;
overflow-x: hidden;
height:140px;
width:128px;
}
#reqvotemem > .reqcomtovoteyes > #boxcom > .comments > ul{
font-size:12px;
text-align:left;
list-style:none;
padding:0px 2px 0px 2px;
height:140px;
margin:0px;
}
#reqvotemem > .reqcomtovoteyes > #boxcom > .comments > ul > li{
border-top:1px solid #808080;
width:116px;
}
#reqvotemem > .reqvoteyes{
background:url(voteyesnon.png);
margin:2px 0px 0px 5px;
height:32px;
z-index:2;
width:32px;
}
#reqvotemem > .reqvoteyes:hover{
background:url(voteyesact.png);
cursor:pointer;
}
#reqvotemem > .reqvoteresult{
color:#34c163;
font-size: 18px;
margin:9px auto;
z-index:1;
width:120px;
}
#reqvotemem > .reqcomtovoteno{
background:url(bgcomvoteno.png);
font-size: 8px;
margin:31px 0px 0px...
JavaScript
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}