After attempting to use jQuery to change the style of a specific element, I was surprised to find that it didn't work as expected.
The typical process for changing the style involves the following code:
$(document).ready(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
Following this, I tried the following code snippet:
$(document).ready(function(){
$("#prdctfltr-2 > div > form > div.prdctfltr_filter_wrapper.prdctfltr_columns_1 > div > div.prdctfltr_filter.prdctfltr_product_cat.prdctfltr_attributes.prdctfltr_single.pf_style_6057cdf153466.prdctfltr_terms_customized.prdctfltr_terms_customized_select > div.prdctfltr_add_scroll.prdctfltr_max_height.prdctfltr_down").css({"display": "none", "max-height": "auto"});
});
Unfortunately, the above code didn't work, and the values for max-height and display remained unchanged.
I inserted the code snippet in the header between <script></script>.
Update: The full code snippet can be found below:
$(document).ready(function(){
$("#prdctfltr-2 > div > form > div.prdctfltr_filter_wrapper.prdctfltr_columns_1 > div > div.prdctfltr_filter.prdctfltr_product_cat.prdctfltr_attributes.prdctfltr_single.pf_style_6057cdf153466.prdctfltr_terms_customized.prdctfltr_terms_customized_select > div.prdctfltr_add_scroll.prdctfltr_max_height.prdctfltr_down").css({"display": "none", "max-height": "auto"});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll prdctfltr_max_height prdctfltr_down" style="height: 150px; display: block;">
</div>