Div not filling up with new content

Question

So my code looks like the following:

 $('.profileCont').on('click', '.interestItem', function() { event.stopPropagation(); var interestItem = $(this); var ancestor = interestItem.parent().parent(); ancestor.attr("data-intParent", ancestor.html()); interestItem.parent().siblings().css("display", "none"); if (interestItem.parent().hasClass('chosen')) { ancestor.hide().html(ancestor.attr("data-intParent")).fadeIn("fast"); } else { interestItem.parent().addClass('chosen'); interestItem.animate({ width: '490px', height: '180px' }); } }); 

 .actualInterests { background-color: #FFFFFF; height: 200px; padding: 10px 15px 0 0; margin: 0 0 10px 0; } .interestCont { height: 85px; padding: 0 0 0 15px; margin: 0 0 10px 0; } .interestItem { height: 100%; padding: 0; border-radius: 3px; box-shadow: 0 0 1px 0px #C4C4C4; position: relative; } .interestItem:hover { box-shadow: 0 0 2px 1px #C4C4C4; cursor: pointer; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="actualInterests intOne col-lg-12 col-md-6 col-sm-12 col-xs-12" data-intParent="one"> <div class="interestCont col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="interestItem col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div> </div> <div class="interestCont col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="interestItem col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div> </div> <div class="interestCont col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="interestItem col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div> </div> <div class="interestCont col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="interestItem col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div> </div> </div> 

the problem is after clicking on one of the those four divs, it expands and the rest are hidden, as expected, but when i click it again so that it goes back to normal it does not seem to work. Can anyone help me to identify what i am doing wrong.

Fiddle:

https://jsfiddle.net/mfttg7f7/

Answer 1

I tried to run your JS, but this line is problematic:

var ancestor = interestCont.parent().parent();

I think you meant to do:

var ancestor = interestItem.parent().parent();

So this is how I got it working. I hope this is what you wanted:

$(document).on('click', '.interestItem', function(e) {
    e.preventDefault();
    var interestItem = $(this);
    interestItem.parent().siblings().css("display", "none");

    if (interestItem.parent().hasClass('chosen')) {
        interestItem.animate({
            width: '100%',
            height: '85px'
        });

        interestItem.parent().removeClass('chosen');
        interestItem.parent().siblings().css("display", "block");
    } else {
        interestItem.parent().addClass('chosen');
        interestItem.animate({
            width: '490px',
            height: '180px'
        });
    }
});