Here is the code that I am trying to improve
http://jsbin.com/cexixamuma/edit?html,output
The links are foldable, they fold when the user clicks on them. Mu understanding is that the a:visited css is not honored by the newer browsers for privacy reasons. I would like to give to my readers the option to check mark a like (✔) when they are done with the topic but my problem is that the when the user clicks on the link (line) the event is already used to fold, unfold the line What other options do I have?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
window.toggleDiv = function(divId) {
var ele = document.getElementById(divId);
var state=jQuery(ele).is(':visible');
jQuery(ele).toggle();
state=jQuery(ele).is(':visible');
localStorage.setItem( divId, state);
}
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$(".collapsible").each(function(index) {
if (typeof($(this).attr('id'))!="undefined") {
id=$(this).attr('id');
var state = localStorage.getItem(id);
ele = document.getElementById(id);
if (state=="true") {
ele.style.display = 'block' ;}
else {
ele.style.display = 'none'; }
}
});
});
})(jQuery)
</script>
<link rel="stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />
<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');" style="font-
size:13pt">Root</a><br>
<div class="collapsible" style="display:none " id="PktS/h+L5EeSqM/4hMH9JA==">
<a class="ConceptLevel2" href="javascript:toggleDiv('KlHtq+Xe60essn+0zs9E6g==');" style="font-
size:12pt">level 1</a><br>
<div class="collapsible" style="" id="KlHtq+Xe60essn+0zs9E6g==">
<div>Level 2</div>
<a class="ConceptLevel3" href="javascript:toggleDiv('EdMUp+28okWIWHVbvUaU1g==');" style="font-
size:11pt">Level 2</a><br>
<div class="collapsible" style="" id="EdMUp+28okWIWHVbvUaU1g==">
<a class="ConceptLevel4" href="javascript:toggleDiv('wIZCSCx/Xk2YShMAkF33Pg==');"
style="font-size:10pt">Level 3</a><br>
<div class="collapsible" style="" id="wIZCSCx/Xk2YShMAkF33Pg==">
<div>Level 4</div>
<a class="ConceptLevel5" href="javascript:toggleDiv('7GKbN5XRqkybT
+XsbHkyqw==');" style="font-size:9pt">Level 4</a><br>
<div class="collapsible" style="" id="7GKbN5XRqkybT+XsbHkyqw==">
<div>Level 5</div>
<a class="ConceptLevel6" href="javascript:toggleDiv
('rV75pTUXp0KP6Mx6EJznDg==');" style="font-size:8pt">Level 5</a><br>
<div class="collapsible" style="display:none "
id="rV75pTUXp0KP6Mx6EJznDg==">
<div class="details">Conclusion: for all the below levels ....</div>
<a class="ConceptLevel7" href="javascript:toggleDiv
('a5qCUDoqI0CPlS4pPGcODQ==');" style="font-size:7pt">Level 6</a><br>
<div class="collapsible" style=""
id="a5qCUDoqI0CPlS4pPGcODQ==">
<div>Level 7</div>
<div>Level 7</div>
</div>
<div>Level 6</div>
</div>
</div>
</div>
<div>Level 3</div>
</div>
</div>
</div>
Update: I ended up using dblclick for marking the paragraph as done
So basically you need to add a class for the visited links? With jQuery that would be: .addClass().