Jquery hide div and show div

Question

I have my code on jsfiddle which has 2 divs, where the user can select features by clicking on a div. in the opposite div i have the same item but hidden. how can i replace the hidden class?

this is what i have come up with:

$("#Label1").click(function () {
    $(this).find('.feature-options1').addClass('hidden');
    $(this).parent().closest('.feature-container').prev().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});

http://jsfiddle.net/X6xcj/9/

Answer 1

is this:

$(this).find('.feature-options1').hide();
$('#label2').find('.feature-options1').show();

what you are trying to achieve?

Answer 2

You should use .parent() not .prev() to get the containing div

$("#Label1").click(function () {
    $(this).find('.feature-options1').addClass('hidden');
    $(this).parent().closest('.feature-container').parent().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});

Here you go: http://jsfiddle.net/5W48X/

.prev() gives you the previous sibling element.

.parent() gives you the container (parent) element.

EDIT:

I had not even seen the id's you use on divs yet. This should work as well:

$("#Label1").click(function () {
    $(this).addClass('hidden');
    $('#Label2').removeClass('hidden');
});

http://jsfiddle.net/6Zbsa/

Answer 3

 $("#Label1").click(function () {
            $(this).find('.feature-options1').addClass('hidden');
            $(this).parent().next().next().find('#Label2').removeClass('hidden');
        });

Try this i may help you.

Answer 4

try this:

$(function(){
    $(".feature-addons").on('click', function(e){
        var lbl = $(this).next();
        $(".feature-addons").next().addClass('hidden');
        lbl.removeClass('hidden');
    });
});