user3001349 user3001349 - 3 months ago 8
HTML Question

SlideUp close button in expanded div does not respond

I was looking for an expandable portfolio solution in jquery and came across a fiddle that I liked, except for it missing a close button for the expanded section.
So I tried adding a button with a simple slideUp() jquery function in an updated fiddle but the button just does not work. The most curious thing about it is that I tried to place the exact same button outside of the div and there it works like a charm. I have also tried and failed in fixing the problem by changing the close function logic with this() and parent() for the button that is inside the expanded element.

Markup:

<div id="portfolio">
<a class="close"> close </a>
<div class="row">
<div class="item" data-rel="0">1</div>
<div class="item" data-rel="1">2</div>
<div class="item" data-rel="2">3</div>
</div>
<div class="details"></div>
<div class="row">
<div class="item" data-rel="3">4</div>
<div class="item" data-rel="4">5</div>
<div class="item" data-rel="5">6</div>
</div>
<div class="details"></div>
<ul id="portfolio-details">
<li>
<a class="close"> close </a>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
</li>
<li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
<li>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
</ul>




Jquery:

var Portfolio = {
Elements: {

items: $('div.item', '#portfolio'),
details: $('#portfolio-details', '#portfolio')

},

fn: {

select: function() {

Portfolio.Elements.items.each(function() {

var $item = $(this);
var $row = $item.parent();
var $details = $row.next('div.details');
var $li = $('li', Portfolio.Elements.details);
var $close = $('.close');


$item.click(function() {

$('div.details').hide();
$details.empty();
var $html = $li.eq($item.data('rel')).html();
$details.html($html).slideDown(600);
$('html, body').animate({
scrollTop: 0
}, 0).animate({
scrollTop: $details.offset().top
}, 300);

});
$close.click(function() {
$details.slideUp();
});
});
}
}
};

Portfolio.fn.select();

Answer

Try changing the binding of click function on $('.close')

$('.portfolio').on('click', '.close', function() {
  $details.slideUp();
})

Hope, that helps. Not sure though!

Comments