Call a CSS file by Jquery .append(), and delete this by second click on the same element

Question

I have a link in HTML:

<li class="skip-link-diszlexia"><a class="assistive-text" href="#" title="Diszlexia barát nézet">Diszlexia barát nézet</a></li>

I want to call an another CSS by Jquery javascript, which is change the font-family and style on some divs and paragraphs, and after the second click on the same element, return back to start. I'm not a Javascript programmer at all, I read the Jquery documentation and created this. It's combine the diszlexia.css file with the default style.css without problem, but the second click (which I want to delete the diszlexia.css from usage) not working:

// Jquery CSS switcher (Diszlexia barát nézet)
$(document).ready(function() {
    $(".skip-link-diszlexia").click(function(){
        $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />');
        return false;
        $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />').remove();
        return false;
    });
});

I not want to use .addClass(), .removeClass() or .css(), because I need to change the fonf-family on many element and just to add an another CSS with the changes (just like we adding custom stylesheets for IEs) would be much easier.

Someone can help me and correct my crappy code?

Answer 1

I guess you need to toggle that reference in each click. mean if its applied remove it and if removed than apply it thus you should try this :

$(document).ready(function() {
    $(".skip-link-diszlexia").click(function(){
        if($(this).find("link").length <= 0)
            $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />');
        else
            $(this).find("link").remove();
    });
});

DEMO

Answer 2

The simplest solution is likely to use addClass and removeClass on the body tag in conjunction with css rules that would change the font based on the body class. Removing the link tag may not undo the font changes

simplified css example

div { font-family: arial}
.dislexia div { font-family: verdana}

JS

$(".skip-link-diszlexia").click(function(){  
    $('body').addClass('dislexia');

 })