jQuery show icon with toggle event

Question

I have create custom toogle script to show/hide content.

Currently when you click first and then second text, icon mechanism working perfect. but when you click first text and again click first icon mechanism not working.

My JS Code:

$(document).ready(function() {

    $('.togglelink').on('click', function(e) {
        e.preventDefault();
        var elem = $(this).next('.toggle');

        $('.toggle').not(elem).hide('fast');
        elem.slideToggle('fast');

        if (elem.is(':visible')) {
            var openslide = $(this).attr("id");

            if (openslide == 'slideNavToggle') {
                $("#where-slide-down").hide();
                $("#where-slide-up").show();

                $("#inspiration-slide-down").show();
                $("#inspiration-slide-up").hide();
                $("#need-slide-down").show();
                $("#need-slide-up").hide();
            }

            if (openslide == 'slideInspToggle') {
                $("#inspiration-slide-down").hide();
                $("#inspiration-slide-up").show();

                $("#where-slide-down").show();
                $("#where-slide-up").hide();
                $("#need-slide-down").show();
                $("#need-slide-up").hide();
            }

            if (openslide == 'slideToggle') {
                $("#need-slide-down").hide();
                $("#need-slide-up").show();

                $("#where-slide-down").show();
                $("#where-slide-up").hide();
                $("#inspiration-slide-down").show();
                $("#inspiration-slide-up").hide();
            }

        }
    });
    $('.toggle').hide('fast');
});

My Fiddle: Sample

Any ideas or suggestions? Thanks.

Answer 1

Here you go: You just have to change from show/hide to toggle. Fiddle

$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');

$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');

if (elem.is(':visible')) {
    var openslide = $(this).attr("id");

    if (openslide == 'slideNavToggle') {
        $("#where-slide-down").toggle();
        $("#where-slide-up").toggle();

        $("#inspiration-slide-down").show();
        $("#inspiration-slide-up").hide();
        $("#need-slide-down").show();
        $("#need-slide-up").hide();
    }

    if (openslide == 'slideInspToggle') {
        $("#inspiration-slide-down").toggle();
        $("#inspiration-slide-up").toggle();

        $("#where-slide-down").show();
        $("#where-slide-up").hide();
        $("#need-slide-down").show();
        $("#need-slide-up").hide();
    }

    if (openslide == 'slideToggle') {
        $("#need-slide-down").toggle();
        $("#need-slide-up").toggle();

        $("#where-slide-down").show();
        $("#where-slide-up").hide();
        $("#inspiration-slide-down").show();
        $("#inspiration-slide-up").hide();
    }

}
});

$('.toggle').hide('fast');