CODEWITHSUNDEEP
javascriptphpjquerycsswordpress
Mv27
Mv27

Reputation: 560

Hide element when click on button and pageload

I cannot get my head around this problem I am having, I hope that my writing is not to complicated to read.

I am making a product with 3 variables. A customer can pickup the products at our place, or we can deliver the products. Because of practical things, we choose to sell products there should be delivered as packages with 30, 60 or 90 products in.

Before a price can be shown, all 3 variables need to get selected. So here comes the problem. If a person wants to pickup the products at our place only 2 variables need to be selected: Length in m and Pickup or Delivery. But that will not give a price. Therefore I need to insert "Pickup" in "Packages" again to get a price.

But I would like to hide "pickup" in packages, so I do not confuse the visitor to much. The image describes what I am looking for:

enter image description here

A demo of the page can be seen here

I was looking at the CSS. Is that what I have to use together with javascript, or how/if it is possible?

<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_pa_packages">
    <li data-wvstooltip="pickup" class="variable-item button-variable-item button-variable-item-pickup" title="pickup" data-value="pickup">
        <span class="variable-item-span variable-item-span-button">pickup</span>
    </li>
</ul>

<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_pa_packages">
    <li data-wvstooltip="pickup" class="variable-item button-variable-item button-variable-item-pickup selected" title="pickup" data-value="pickup">
        <span class="variable-item-span variable-item-span-button">pickup</span></li>
    </li>
</ul>

Best regards.

Upvotes: 2

Views: 89

Answers (1)

Parham Parnian
Parham Parnian

Reputation: 41

You can listen for every time user clicks on one of the "Pickup or delivery" options, if the selected option is "pickup", select the "pickup" option in "Packages" with JQuery. This is the implementation of this algorithm.

jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery] li").click(function(){
    var selectedDelivery = jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery]").find("li.selected").attr("data-value");
    if (selectedDelivery == "pickup"){
        jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup] span").click();
        jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide(); // hide the "pickup" option in "Packages" if you like
    }
});

Upvotes: 1

Related Questions