Question

The question is simple, but in my implementation something has gone awry.

You can see my implementation here.

So what I want to happen is, when you click on one of the names in box #1, the dotted line and the #1 in a dotted circle both turn black and solid. The dotted line is not a border. The same should happen when you click any other data in the other corresponding boxes.

The main issue I am facing is that when I do a use the .css function in jQuery to manually change the color and the border, it works nicely. However, I would like to modify it with the toggle class (because I couldn’t get toggle() to work with the css function) – so that when you click it once, you see the element clicked highlighted (with a 1px border – this functionality is already there), and the corresponding number for the box (and dotted line) turned to solid black.

Thanks.

Answer 1

It looks like the JavaScript was fine. The only thing I could see messing things up was this line:

$('#bc1 dashed-circle').toggleClass('bc-dashed-to-solid-circle');

You’ll want to change that selector to #bc1 .dashed-circle.

The reason the dashes and number aren’t changing color is because of specificity. You declare their normal color (#bdbebf) with the selector #blank-dashboard-breadcrumb span — an id and an element. You declare the “selected” color (black) with .bc-dotted-to-solid or .bc-dashed-to-solid-circle — simple classes. Even when the dash and the 1 have the appropriate classes, they still have a more specific selector telling them to remain gray.