anchor icon, with hide div, change on hover and on click

StackOverflow https://stackoverflow.com/questions/22616669

Question

I have an anchor point that toggles a hiden div. I'm being able of changing the anchor icon when i hover over it (i've done a sprite) but I'm not capable of adding a second .click event wich let me change the anchor to it's 'btn_close' icon.

I want the code to do:
hover on 'btn_open'------it changes to 'btn_open':hover
click on 'btn_open'------it changes to 'btn_close' and toggles the hiden div
hover on 'btn_close'------it changes to 'btn_close':hover
click on 'btn_close'------it changes to 'btn_open' and toggles the hiden div

I did this fiddle simplifying my problem (showing the point I reach).
http://jsfiddle.net/weberjavi/72xSL/

html:

<body>
<a href="#" class="btn_open">open</a>  
<div id="content"></div>
</body>

jquery:

$("#content").hide();
$(".btn_open").click(function () {
$("#content").toggle("slow");
return false;
});

Thanks everyone.

Was it helpful?

Solution

Try this i'm not sure if it's what you're trying to do

Adding the toggle it will change the classes of the button removing one if it's already on the element and adding it if not.

I attached the handler to all the elements that their class starts with btn this will make it work with both btn_close and btn_open

$("#content").hide();
$("[class^=btn]").click(function () {
    $(this).toggleClass("btn_open btn_close")
    if($(this).hasClass("btn_close")){
      $(this).text("close")
    }else{
      $(this).text("open")
    }
   $("#content").toggle("slow");
    return false;
});

Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top