I have this code:
<div id="product_<?php echo $product->id; ?>"></div>
This is ajax js code:
$(function () {
$('.expand').on('click', function (e) {
e.preventDefault();
var token = "<?php echo $this->security->get_csrf_token_name(); ?>";
var hash = "<?php echo $this->security->get_csrf_hash(); ?>";
var productID = $(this).data("id");
$.ajax({
type: 'GET',
dataType: 'html',
url: 'marketplaces/marketplaces/test_expand',
data: {
product_id: productID,
token: hash
},
beforeSend: function () {
},
success: function (data, textStatus) {
$("#product_" + productID).html(data);
},
error: function (xhr, textStatus, errorThrown) {
alert('request failed');
},
complete: function () {},
});
});
});
And this button:
<div data-id="<?php echo $product->id; ?>" class="expand">
<a href="#" class="bt btn-primary btn-sm">Offers
<i class="fas fa-chevron-down"></i>
</a>
</div>
When I click button div with id=product_(ID) it show me data from ajax. It's working! I want to hide this div when I click again on button!
How is possible? Thank you!
$('[data-id=product_ID]').hide();
I think you can use like this code. Hope to be helpful to you.
You can put condition with custom code for show hide functionality.
Here is the sample code:
$(function () {
$('.expand').on('click', function (e) {
e.preventDefault();
var currBoxObj = this;
var token="<?php echo $this->security->get_csrf_token_name(); ?>";
var hash="<?php echo $this->security->get_csrf_hash(); ?>";
var productID = $(this).data("id");
if(!$(currBoxObj).hasClass("showingblock")){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'marketplaces/marketplaces/test_expand',
data:
{
product_id: productID,
token: hash
},
beforeSend: function () {
},
success: function (data, textStatus) {
$(currBoxObj).addClass("showingblock");
$("#product_"+productID).show();
$("#product_"+productID).html(data);
},
error: function (xhr, textStatus, errorThrown) {
alert('request failed');
},
complete: function () {
},
});
}else{
$("#product_"+productID).hide();
$(currBoxObj).removeClass("showingblock");
}
});
});
You should add a class to the element when you open it
$("#product_" + productID).addClass('is-open')
Then check if it has the class on the second click (above the ajax call)
if ($("#product_" + productID).hasClass('is-open')) {
$("#product_" + productID).hide().removeClass('is-open')
return
}
If you want to close all before opening one then its trivial to do:
$('.is-open').hide().removeClass('is-open')