skip to Main Content

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!

3

Answers


  1. $(‘[data-id=product_ID]’).hide();

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

    Login or Signup to reply.
  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");
                }
            });
        });
    
    Login or Signup to reply.
  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')

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search