Search code examples
htmlcsshyperlinkvisited

How can I add a check mark to a link that was visited (the link expands a paragraph, check means "done with reading it")?


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


Solution

  • So basically you need to add a class for the visited links? With jQuery that would be: .addClass().