Archived topic
Apply CSS style when quantity is hidden
5 replies · Started by nik9 on January 5, 2021
Hello,
We want to make the add to cart button .single_add_to_cart_button { width: 100%;} when class="quantity hidden" e.g. the quantity button are hidden. We found this solution below but this is JS. is there a way to apply a style when a element is hidden via CSS?
function myFunction() {
var x = document.getElementById("myDIV");
if (window.getComputedStyle(x).visibility === "hidden") {
// Do something..
}
}Hi there,
Unfortunately this would need to be a JS solution as far as I understand.
Hmm.. the question is if we can build kind of a rule in CSS. When quantity buttons have the class "hiden" to fire. :)
Hi,
I'd change the JS to this:
const quantity = document.querySelector('.quantity'); //quantity class
const atc_btn = document.querySelector('.single_add_to_cart_button'); //add to cart btn
function btn_change_width(){
if(quantity.classList.contains("hidden")){ // checks if quantity has 'hidden' class
atc_btn.style.width = '100%';
} else if(!quantity.classList.contains("hidden")){
atc_btn.style.width = 'auto';
}
}
btn_change_width();Hi Elvin,
Works now better, But I get errors:
(index):5020 Uncaught TypeError: Cannot read property 'classList' of null
at HTMLDocument.<anonymous> ((index):5020)
(anonymous) @ (index):5020
Also when the second nav is sticky, it is not full width.
(index):5020 Uncaught TypeError: Cannot read property ‘classList’ of null
at HTMLDocument.<anonymous> ((index):5020)
(anonymous) @ (index):5020
You can ignore that. That error only shows inbetween the stuck and the "sticky-navigation-transition" state of the primary menu. It's not detrimental to how the sticky secondary nav script functions.
Also when the second nav is sticky, it is not full width.
Adding this CSS shouldn't have any issues with the script.
nav#secondary-navigation {
width: 100%;
}