modification of toogle.js

I just need to change the appearance of a toggle button.

[w9914420]

Good morning everyone.

I am using a toogle script to create a hide/show a div the code is as follows.

$(function()
{
$("#click_here").click(function(event) {
event.preventDefault();
document.getElementById('click_here').style.color=(document.getElementById('div1').style.display=='block') ? '#bcbdc0':'#00a54f';
$("#div1").slideToggle();
});
$("#div1 #shut a ").click(function(event) {
event.preventDefault();
$("#div1").slideUp();
});
});

now ideally I want to be able to style this button so that it looks like this state when it is selected:

a:hover#click_here{
background-color: #00923F;border: 2px outset #314D30;padding:2px 2px 2px 4px;color: #E8FFF1;
}

but what is happing is that the two color attributes in the js are causeing my css not to read. I am wondering how can I style my preffrences in Js as well

thank you

w9914420

[daveVk]

document.getElementById('click_here').style.color=(document.getElementById('div1').style.display=='block') ? '#bcbdc0':'#00a54f';

rather than change color change className

document.getElementById('click_here').className=(document.getElementById('div1').style.display=='block') ? 'thisWay':'thatWay';

change

a:hover#click_here
to
a:hover#click_here .thisWay

If #click_here already has className take that into account
also check order of this/that

[w9914420]

Thank you Davevk

I implemented your suggestion and now the toggle works with a predefined class which I have called .thatWay so actually the css now looks like this:

#click_here .thatWay which works fine. to be honest iam not needing a second class so i did not use .thisWay

If I may ask, you will notice i have a anchor class called

#div1 #shut a, which is located in this toggled div and closes the div when its open, I am just wondering how i can make this button toggle the click_here .thatWay class to the buttons original state before it is pressed to reveal the hidden div?

thanks again for your support

regards

w9914420

I hope this makes sense

[daveVk]

If I understand correctly you need to remove .thatWay prior to closing div.

document.getElementById('click_here').className="";
$("#div1").slideUp();

OR Maybe (I am a JScript novice)

$("#click_here").className="";
$("#div1").slideUp();

[w9914420]

hi Dave thank you very much for your solution.

I opted for the:

document.getElementById('click_here').className="";
$("#div1").slideUp();

which removes the class from the button

thanks again

w9914420