change color of current opened id

[iamRDM]

     <dl><dt>First</dt> <dd>text here</dd>

    <dt>Second<dt> <dd>text here </dd> 
    <dt>third</dt>  <dd>text here</dd>
    </dl>

What I want is When we click on “First” It changes its color to “red” When we click on “Second” then it changes its color to “red” an other i.e “First” “Third” becomes “black”

What my function does is: all the text inside “dd” is hidden but when we click on “First” “Second” or “Third” then it shows text inside then but when we open one the others are closed.

I just need help with the color changing part. Thanks in advance

[Paulie_D]

I’m not seeing an ID’s in your code.

Regardless, an click function requires JS/JQ.

It sounds as though you have a function already…perhaps you could create a reduced case in Codepen.

MOVED to JS section

[iamRDM]

here is codepen http://codepen.io/iamrdm/pen/szuox

[Paulie_D]

Why not just use the addClass in jQuery to change the color of the clicked dt and remove it from any other dt that already have that class?

Call it dt-active (or something) and just change the color that way.

[iamRDM]

Can you please give me the code.
I don;t know anything about jQuery :(

[Paulie_D]

So where did all that current JS/JQ come from?

I’m thinking that, perhaps, you might want to look at the Jquery UI

http://jqueryui.com/accordion/

[iamRDM]

got it from css-trick demo’s

[Paulie_D]

I think you will find this much easier.

http://jqueryui.com/accordion/

All you would have to do is edit the CSS…all the functionality would be built in..as far as I know.

[iamRDM]

Thanks @Paulie_D :)

[iamRDM]

One more thing please
What to change in jQuery so that the boxes close only when I click on theri title else they should remain open.

[Paulie_D]

I think that’s a setting in the JQ.

You would have to read the documentation.

[Paulie_D]

Hmmm…it appears that the Jquery accordion won’t let you but this is probably what you are after:

http://www.snyderplace.com/2010/03/jquery-collapsible-plugin/

[Author]

Posts