Content Slider jQuery

Question

newbie here!

I am new to jQuery and just started to learn few days ago. You can tell once you look at my jQuery code lol.

I am trying to code a content slider with jQuery and I am not sure what I am doing wrong. Following are the things I want to achieve beside fixing my code.

1. I want to apply fading effect fadeIn()
2. I want to toggle the content itself plus onclick.
3. How can I improve this code?

All I need someone to point out the mistake I am making. And that would be highly appreciated if someone can also guide me how can I achieve above mentioned things.

You may find my code here jsfiddle

$(document).ready(function () {
    /* Initial State show 1st content */
        $("#button > div:nth-child(1)").css("background-color", "#116f11");
    $(".para-2").hide();
    $(".para-3").hide();
    $(".para-1").show();

    function slider(n) {
        /* if click #1 */
      if (n == '1'){
        $(".para-2").hide();
        $(".para-3").hide();
        $(".para-1").show();
        $("#button > div:nth-child(1)").css("background-color", "#116f11");
      } else if (n == '2'){ /* if click #2 */
        $(".para-2").hide();
        $(".para-1").hide();
        $(".para-2").show();
        $("#button > div:nth-child(2)").css("background-color", "#116f11");
      } else if (n == '3'){ /* if click #3 */
        $("#button > div:nth-child(3)").css("background-color", "#116f11");
        $(".para-2").hide();
        $(".para-1").hide();
        $(".para-3").show();
      }
    }
});

Answer 1

I have updated your code. Is this what you were aiming to achieve ?

I specifically updated your slider function :

function slider(n)
{
    switch (n)
    {
        case 1:
            $("#slideshow").children().fadeOut(400);
            setTimeout(function()
            {
                $(".para-1").fadeIn();
            },405);
            $(".selected").removeClass("selected").addClass("unselected");
            $("#button > div:nth-child(1)").addClass("selected").removeClass("unselected");
            break;
        case 2:
            $("#slideshow").children().fadeOut(400);
            setTimeout(function()
            {
                $(".para-2").fadeIn();
            },405);
            $(".selected").removeClass("selected").addClass("unselected");
            $("#button > div:nth-child(2)").addClass("selected").removeClass("unselected");
            break;
        case 3:
            $("#slideshow").children().fadeOut(400);
            setTimeout(function()
            {
                $(".para-3").fadeIn();
            },405);
            $(".selected").removeClass("selected").addClass("unselected");
            $("#button > div:nth-child(3)").addClass("selected").removeClass("unselected");
            break;
    }
}

I hope this helps.

Cheers, Fjpackard.