CODEWITHSUNDEEP
htmlcss
thechrishaddad
thechrishaddad

Reputation: 6735

arrow pointer on nav links change onclick

i have managed to display Right Arrow pointer on my navigation list, and when i click on these navigation links they open a sub navigation list, what i want to happen is i want the arrow to change to a arrow pointing down when visiting, i have not been successfull, this is my code so far to get this to display a right arrow at the moment, any ideas on how to make it change onclick?

.sidebar-category li > a:before {
    color: #888;
    content: '► ';
}

.sidebar-category li > a:hover:before {
    color: #444;
    content: '► ';
}

.sidebar-category li > a:only-child:before {
    content: '';
}

Upvotes: 1

Views: 1469

Answers (2)

Pajken
Pajken

Reputation: 519

It's hard to know based on your description, but i would add following:

.sidebar-category li > a:focus:before {
    color: #444;
    content: '▼ ';
}

This might help... This is active yet only when you have clicked. Without jQuery this is a hard thing to solve.

I would use jQuery to add a class when user have clicked on the called "open" and instead used following css:

.sidebar-category li > a.open:before {
    color: #444;
    content: '▼ ';
    }

The jQuery could look something like this:

$('.sidebar-category li > a').click(function() {
    this.toggleClass('open');
});

Hope this helps. :)

Upvotes: 1

Anon
Anon

Reputation: 2874

JQ

$('.sidebar-category li').click(function(){
 $(this).toggleClass('clicked')
})

CSS

.sidebar-category li.clicked > a:before {content: '▼ ';}

Upvotes: 1

Related Questions