Create a visual pie chart (no data) that animates with jQuery

Question

I have been tasked with creating a pie chart to display categories in a visual way but the chart does not contain any data which means using Google charts or any data driven chart maker isn't really an option. I've made the pie pieces images because my hope is that when the user clicks on a piece it can slide out and then on a second click it will slide back into it's spot.

I tried creating the chart with just CSS but I didn't think it was possible to create the animation I was hoping for making the pie chart that way. The pieces will eventually have icons on them as well which was another reason I thought using images might work best. The code is really clunky and I'm not sure if there is a better way to do this all together but the part I am most stuck on is getting the pieces to move back into place.

I created a js fiddle (http://jsfiddle.net/fAs7W/4/) to give a better idea of what I need help with. Using the click function allows me to move the piece out of the pie but I can't figure out how to get it to move back in on second click. I also tried using toggleClass but I'm doing something wrong there because that doesn't do anything. The toggleClass is on the darkest piece and the click function is on the one to the right of that piece. I've been trying to figure this out for a few days so any help is appreciated. Or if you could point me in the right direction. I've checked out a bunch of other tutorials but I think I'm missing something and my JS/jQuery skills are not where I want them to be.

$(document).ready(function () {
$(".medicare").click(function () {
    $(this).toggleClass(".medicareClicked");
});
$(".medicaid").click(function () {
    $(".medicaid-def").css("display", "block");
    $(".medicaid").css({
        "left": "410px",
        "top": "111px"
    });
});

});

http://jsfiddle.net/fAs7W/4/

Answer 1

Check this fiddle out: http://jsfiddle.net/fAs7W/9/

I've renamed the class-to-add to "clicked", we can specify a more specific class in css with

 .medicaid.clicked {
     left: 385px;
     top: 20px;
 }

I've also removed the "dot" from the name you pass into the toggleClass function.

$(document).ready(function () {
    $(".medicaid").click(function () {
        $(this).toggleClass("clicked");
    });
});