How to change text color when clicking in another div

[Amorim]

Hi,

I’m searching for a way in css to click on a text and, when clicked, the fontcolor of a text in another div will change.

This is my code:

<li class=”red”>Who we are
<li class=”blue”>What we do
<li class=”blue”>Why join us?

Who we are

What we do

Why join us?

So when I click on ‘What we do’ in “navcontainer” I want the text ‘What we do’ in “content” turns blue.

Is that possible with css?

I hope I explained well enough to understand ;-) Thanks in advance

Leonie

codepen

[Paulie_D]

Basically,a click requires javascript.

Now with JS (or a JS library like JQuery) there is usually more than one way to do anything.

You need to detect the class that’s applied to your li and apply that class name to p` in the content div.

I confess that my JQ skills are poor but that shouldn’t be hard although I’m not sure class detection would be the right method…more like data attributes.

I’ll push this over to the JS area.

[dyr]

You could do this with pure CSS using radio buttons/checkboxes but it would be very ugly and very hacky so I would recommend not trying that.

Amorim, do you have experience with JavaScript?

[Alen]

Something like this: http://codepen.io/alenabdula/pen/fecGa/

[Paulie_D]

As I said. my JQ skills are poor but I’ve cobbled this together:

http://cdpn.io/v/f5e44c0ad1e442a6ab859a78e6363569

It will toggle the color on and off but I haven’t figured out how to remove one color AND apply another at the same time.

Plus I’m pretty sure there must be an easier way because the HTML / ID set-up seems a little inflexible.

[Amorim]

I’m not experienced with javascript, but when wellexplained I might give it a try ;-)

It comes close to the solution but after the click the text must stay in that color (not just when hovered) and turn back when another item is clicked.
What I need is the menu-item and div-item will have the same color, and change again when another menu-item is clicked.

Thanks so far!

[Paulie_D]

Aha…still ugly but…

http://codepen.io/Paulie-D/pen/952eac5ab270d5b25452248f0c91c2ed/

[Amorim]

@Paul_D That’s exactly what I need! But somehow it doesn’t work when I insert it in my website. The javascript is in the head, html and css are exactly as in the pen but eventhough it doesn’t work. Any idea why this could be, what I did wrong?
You can see an example here:

http://www.amorim.nl/color-toggle/index.html

Thanks!

[Paulie_D]

Looks like you haven’t referenced the Jquery Library in your head section.

You’d need to add this link to the latest Jquery repository before any other JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

[Amorim]

Oops, of course….

Almost getting there now! It works, but I still need a little (?) function.
What do I have to change to make the clickable text the same color as the highlighted section text.

You can see my example here:
http://www.amorim.nl/toggle/index.html

So that when I click on ‘who we are’ it will turn red together with the highlighted section, and switches back when clicking again on, for example, ‘what we do’ when clicking there.

I need this because it is a one-page website and this way it connects the title in the ‘menu’ and the content text.

Thanks again!

[Paulie_D]

So that when I click on ‘who we are’ it will turn red together with the highlighted section, and switches back when clicking again on, for example, ‘what we do’ when clicking there.

You would have to examine the attributes / ids / & classes I used in my example.

Each of my links has a data-attribute like data-color="red".

The JQ function looks for that attribute…takes the ‘value` and looks for div with the same ID

Then it applies the class of ‘highlight’…the rest is just CSS.

So data-color="red" matches to #red and then

#red.highlight p {
  color:red;
}

I’m sure that the JQ could be even simpler and rely less on classes (i.e. actually apply CSS colors) but that’s beyond me.

[Amorim]

Hi Paulie,

I understand. But the text in the tabs is specified ‘white’ in the .section a class for all tabs:

.section a {
color:white;
}

So the text ‘red’ ‘green’ ‘orange’ are all white.
What I need is when I click on tab ‘red’ the text ‘red’ will turn red, (and stays red, not only with hover) when I click green it will turn green etc. so it will have the same color as the highlighted text in the paragraphs and turn back to white when clicked on another tab.
Do you think that will be possible?

[Paulie_D]

Do you think that will be possible?

I’m sure it would be,you’d have to experiment with the CSS etc.

[Amorim]

Hi Paulie,

Sure, I tried for hours but I can’t find the solution.
It has to be something else than just css because there is only one style for three items and there must be a separate style for each item.
I think I give up, but thanks for your help anyway.

[Author]

Posts