I am using Isotopes on a page. When you click a item the item adds a class and expands size. You can see an example of what I mean on the Isotopes demo page. (Click and element to see.)
I have content that shows when in a large view. Inside the large view I have a button that allows a person to review the item which then opens a lightbox. The problem is when the button is clicked the element goes back to the small state. How do I prevent this from happening if the button is clicked?
In other words if the item is clicked go back to smaller state. If the review button is clicked then stay large.
HTML
<div class="element indica" data-category="indica">
<p class="type">I</p>
<h2 class="name">Name</h2>
<p class="strain-info">Information Here</p>
<!-- WHEN BUTTON BELOW IS CLICK DO NOT RESIZE ELEMENT -->
<p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox"><span style="background-color: #000;">Review Strain</span></a></p>
</div>
JS
var $j = jQuery.noConflict();
$j(function(){
var $jcontainer = $j('#container');
//Isotope Code
//JS controling only the resizing of an element
$jcontainer.delegate( '.element', 'click', function(){
$j(this).toggleClass('large');
$jcontainer.isotope('reLayout');
});
});
EDIT
I tried the following code, per Aslam Khan's Answer, which did not work:
<p class="review"><a class="fancy_button review-form-lb" href="#review-form-lightbox" onclick="javascript:void(0);"><span style="background-color: #000;">Review Strain</span></a></p>
I added onclick="javascript:void(0);
to the <a>
tag.