Change class on a-element with Javascript

Question

I'm fairly new to Javascript, and I've run into an issue which is annoying.

I have a list containing lists. I have a script that sets the list visible / invisible on click. However, I wan't to toggle / add a class to the link, once it has been pressed.

My list looks like this

<ul>
    <li><a href="#" onclick="toggle('item1');">Click something</a>
    <ul id="item1" style="display: none;">
        <li>Something ...</li>
        <li>Something something</li>
    </ul></li>
    <li><a href="#" onclick="toggle('item2');">Click something else</a>
    <ul id="item2" style="display: none;">
        <li>Something more...</li>
        <li>Something something less?</li>
    </ul></li>
</ul>

and my script looks like this:

<script type="text/javascript">
    function toggle(id) {
        var v = document.getElementById(id);

        if (v.style.display == '') {
            v.style.display = 'none';
            v.removeClass("selected");
        } else {
            v.style.display = '';
            v.addClass("selected");
        }
    }
</script>

The list shows and hides as it's supposed to, but the class is not added nor removed.

CSS is like this:

a:link {
    color: #000000;
    text-decoration: none;
}

a:hover, a.selected {
    color: #005b97;
    text-decoration: none;
    padding-left: 2px;
}

Thanks in advance

Best Regards Benjamin

use `$(id).toggleClass("selected");` and dont forget to include jquery — Berker Yüceer, Aug 10 '12 at 10:58
May be this can help you, http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — abhinav pratap, Aug 10 '12 at 11:01
@BerkerYüceer You should note that this requires jQuery and isn't ordinary vanilla JavaScript. — Constantino Tsarouhas, Aug 10 '12 at 11:14
@RandyMarsh thats why i said ("dont forget to include jquery") at the end.. and as long as considering he already tried to use jQuery in his code that means he doesnt require "vanilla JavaScript".. — Berker Yüceer, Aug 10 '12 at 11:30
I've included jquery - forgot to mention that :/ Anyway, it doesn't work with $(id).toggleClass("selected"); However, if I use $("a")... something does happen. Sadly it affects all a-tags in the html :) — Benjamin Laffel Hooge, Aug 10 '12 at 13:38

score 5 · Answer 1 · answered Aug 10 '12 at 11:00

5

js does not have an inbuilt add and remove class

Try this

To add a class

document.getElementById("MyElement").className += " MyClass";

To remove a class

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/ , '' )

And if you need to check if an element has a class

function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

answered Aug 10 '12 at 11:00

Clyde Lobo

9,126
7
34
61

Maybe I'm doing it wrong, but if I try this - it adds "selected" to
– Benjamin Laffel Hooge Aug 10 '12 at 13:46

score 3 · Answer 2 · answered Aug 10 '12 at 10:58

3

There's no addClass / removeClass in vanilla JavaScript.

Either you have to use HTML5 classList API or directly manipulate v.className.

answered Aug 10 '12 at 10:58

Samuli Hakoniemi

18,740
1
61
74

score 1 · Answer 3 · answered Aug 10 '12 at 11:01

1

document.getElementById("idElement").setAttribute("class", "className");

answered Aug 10 '12 at 11:01

Anooj P

346
4
16

This would replace any other class applied to the element. – Christofer Eliasson Aug 10 '12 at 11:03

effectica · Accepted Answer · 2012-08-10T14:18:52.350

1

Tried to do it with less code. Hoefully it does what you need it to do.

HTML:

<ul>
<li><a class="aSwitch" href="#" >Click something</a>
<ul id="item1" style="display:none">
    <li>Something ...</li>
    <li>Something something</li>
</ul></li>
<li><a class="aSwitch" href="#" >Click something else</a>
<ul id="item2" style="display:none">
    <li>Something more...</li>
    <li>Something something less?</li>
</ul></li>

CSS:

a:link {
color: #000000;
text-decoration: underline;
}

a.selected {
color: #005b97;
text-decoration: none;
padding-left: 2px;
}

jQuery

$('a.aSwitch').click(function() {
$(this).next().toggle();
$(this).toggleClass('selected');
});

See it working here: FIDDLE

edited Aug 10 '12 at 14:18

answered Aug 10 '12 at 11:49

effectica

780
6
12

Thank you for the hint. Was almost c/p-able :) just had to add `$(window).load(function() { ... });` – Benjamin Laffel Hooge Aug 10 '12 at 15:43
You are welcome Also a shorter **$(function(){ //jquery code here });** would work – effectica Aug 10 '12 at 16:00

score 0 · Answer 5 · answered Aug 10 '12 at 11:04

Most easily u can add jquery addon

<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

Than change your code to

<script type="text/javascript">
function toggle(id) {
    var v = document.getElementById(id);
    $('#' + id).toggleClass("selected");
    if (v.style.display == '') {
        v.style.display = 'none';
    } else {
        v.style.display = '';
    }
}
</script>

Change class on a-element with Javascript

5 Answers5