Hide Advanced Details

Deleted member 219079

D

Deleted member 219079

HTML:
<td class="alt1">
		<a href="http://www.hiveworkshop.com/forums/models-530/templar-plague-doctor-256875/#" style="cursor: pointer; font-weight: bold; font-size: 14px; text-align: center" onclick="this.style.display='none'; document.getElementById('extrad').style.display=''; return false">Click here to display advanced details.</a>
		<div style="display: none" id="extrad">
		<dl>
			...
		</dl>
		</div>
	</td>

into

HTML:
<td class="alt1">
                  <input type="checkbox" id="toggle">
                  <label for="toggle" class="link hideontoggle">Click here to display advanced details.</label><label for="toggle" class="link toggled">Click here to hide advanced details.</label>
                  <div class="toggled">
                     <span class="toggled" style="display:block; margin-top:10px"></span>
                     <div style="display: none" id="extrad">
		          ...
                  </div>
               </td>

in css
HTML:
input[type=checkbox]:checked ~ .toggled {
	display: none;
}
input[type=checkbox]:checked ~ .hideontoggle { 
	display: block;
}
.hideontoggle{
	display: none;
}

that's a method i used in a school work. but dont take it for granted, i believe it needs some fixing, but the mechanic works i guarantee it.
 
Last edited by a moderator:
Top