同位素单击以切换-如何使用关闭按钮

Question

I am using the following code in my JS to toggle the size of a grid element when clicked. When a element is clicked, this toggle changes the size of the element, and displays more content.

Currently, the whole clicked element is clickable in order to return it to its previous state. Is it possible to add a close 'X' button that is linked to toggling the state instead of having the whole element clickable?

$grid.on( 'click', '.grid-item', function() {
  // change size of item by toggling gigante class
  $( this ).toggleClass('gigante').siblings().removeClass('gigante');
  $grid.isotope('layout');
});

https://codepen.io/whitinggg/pen/pLMdWB

Answer 1

Try this:

$grid.on( 'click', '.toggle', function() {
// change size of item by toggling gigante class
$(this ).closest('.grid-item').toggleClass('gigante').siblings().removeClass('gigante');
$grid.isotope('layout');
});

Change your buttons:

<p><i class="toggle far fa-plus-square"></i></p>
<div class="toggle close-button"><button>X</button></div>

Here is a codepen