Skrývání korektur pomocí atributu

korektury/static/korektury/opraf.css

@@ -33,6 +33,12 @@ img{background:white;}
 	--rgb: 0, 255, 0;
 }
 
+[data-opravazobrazit="false"] {
+	.corr-body { display: none; }
+	.corr-buttons { display: none; }
+	.toggle-button { transform: rotate(180deg); }
+}
+
 .pointer-hi, 
 .pointer{ 
 	position:absolute;

korektury/static/korektury/opraf.js

@@ -96,19 +96,8 @@ function img_click(element, ev) {
 	return show_form(img_id, dx, dy, '', '', '', '');
 }
 // hide or show text of correction
-function toggle_visibility(oid){
+function toggle_visibility(oprava){
-	var buttondiv = document.getElementById(oid+'-buttons')
+    oprava.dataset.opravazobrazit = oprava.dataset.opravazobrazit !== 'true';
-	var text = document.getElementById(oid+'-body');
-    var toggleimg = document.getElementById(oid+'-toggleimg');
-	if (text.style.display == 'none'){
-		text.style.display = 'block';
-		buttondiv.style.display = 'inline-block';
-        toggleimg.style.transform = "";
-	}else {
-		text.style.display = 'none';
-		buttondiv.style.display = 'none';
-        toggleimg.style.transform = "rotate(180deg)";
-	}
 	for (var i=0;i<comments.length-1;i++){
 		 place_comments_one_div(comments[i][0], comments[i][1])
 	}

korektury/templates/korektury/korekturovatko/__oprava.html

@@ -9,6 +9,7 @@
 <div name='op{{o.id}}' id='op{{o.id}}'
      class='box'
      data-opravastatus="{{o.status}}"
+     data-opravazobrazit="true"
      onmouseover='box_onmouseover(this)'
      onmouseout='box_onmouseout(this)'
 >
@@ -22,7 +23,7 @@
   </div>
   <div class='corr-header'>
 			<span class='float-right'>
-				<span id='op{{o.id}}-buttons'>
+				<span id='op{{o.id}}-buttons' class='corr-buttons'>
 	  			<form action='' method='POST'>
 	   				{% csrf_token %}
 	   				<input type='hidden' name='id' value='{{o.id}}'>
@@ -64,8 +65,8 @@
           {% endif %}
 
 				</span>
-				<button type='button' onclick='toggle_visibility("op{{o.id}}");' title='Skrýt/Zobrazit'>
+				<button type='button' onclick='toggle_visibility(this.parentElement.parentElement.parentElement);' title='Skrýt/Zobrazit'>
-          <img id='op{{o.id}}-toggleimg' src="{% static "korektury/imgs/hide.png" %}"/>
+          <img id='op{{o.id}}-toggleimg' class='toggle-button' src="{% static "korektury/imgs/hide.png" %}"/>
 				</button>
 
 			</span>