CODEWITHSUNDEEP
javascriptjquerycssaddclassremoveclass
Benjamin Laffel Hooge
Benjamin Laffel Hooge

Reputation: 15

Change class on a-element with Javascript

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

Upvotes: 1

Views: 396

Answers (5)

effectica
effectica

Reputation: 790

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

Upvotes: 1

Berker Y&#252;ceer
Berker Y&#252;ceer

Reputation: 7335

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>

Upvotes: 0

Anooj P
Anooj P

Reputation: 346

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

Upvotes: 1

Clyde Lobo
Clyde Lobo

Reputation: 9174

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|$)'));
}

Upvotes: 5

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

There's no addClass / removeClass in vanilla JavaScript.

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

Upvotes: 3

Related Questions