Show and hide div with ajax content

Question

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!

Answer 1

$('[data-id=product_ID]').hide();

I think you can use like this code. Hope to be helpful to you.

Answer 2

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");
            }
        });
    });

Answer 3

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')