Show Or Hide Div Based On CSS Class

Question

I am trying to show or hide a div called "contact-form" on website based on another divs a css class, which is connected to whether a product is in or out of stock.

It needs to show the div if the class is "in-stock", and hide if it's class is "out-of-stock"

any ideas? struggling to figure it out!

<div id="contact-form"></div>

<p class="stock in-stock"></p> <!-- if product is in stock this shows-->

<p class="stock out-of-stock"></p> <!-- if out of stock this show-->

<script>

    if ('p.in-stock') {
        ('#contact-form').show();   
    }
    else {
        ('#contact-form').hide();
    }

</script>

Website is here - http://trent-art.co.uk/shop/barnes-david-still-life-of-flowers/ - out of stock product which needs the "submit best offer" button hiding if out of stock.

This question is a little short on information. Can you share what you have tried, and what problems you have run into? — Jay Blanchard
– Jay Blanchard, Commented Jun 9, 2015 at 14:14
this should help you w3schools.com/jquery/eff_toggle.asp it shows you on to hide/reveal by click, you can then adapt it to your needs — keikoku92
– keikoku92, Commented Jun 9, 2015 at 14:18

Tushar · Accepted Answer · 2015-06-09 14:17:01Z

3

$('#contact-form').toggle($('p.stock').hasClass('in-stock'));

OR

if ($('p.stock').hasClass('in-stock')) {
    $('#contact-form').show();
} else {
    $('#contact-form').hide();
}

answered Jun 9, 2015 at 14:17

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yann Bertrand Over a year ago

He didn't mention that he uses jQuery.

FoamyMedia Over a year ago

i have added this to my site and it didn't work <script> $(document).ready(function() ({ if ($('p.stock').hasClass('in-stock')) {$('#contact-form').show(); } else { $('#contact-form').hide(); } }); </script>

Tushar Over a year ago

@cookney Make sure you've loaded jQuery before this, and all the elements used above are unique on the page

FoamyMedia Over a year ago

@tushar sorry still not working, can see my code right at bottom of the page on trent-art.co.uk/shop/barnes-david-still-life-of-flowers - best offer button remains

talemyn · Accepted Answer · 2015-06-09 14:46:29Z

Since you didn't tag your question with jQuery, here is a vanilla JS alternative:

var formDiv = document.getElementById("contact-form");
var stockPara = document.getElementsByClassName("stock");
var sStockClass = stockPara[0].className;
formDiv.style.display = (sStockClass.indexOf("in-stock") < 0) ? "none" : "block";

This code could be shortened into fewer lines (technically, you could do it in one), but I left it broken up for clarity. The "consolidated" version would be:

document.getElementById("contact-form").style.display =
    (document.getElementsByClassName("stock")[0].className.indexOf("in-stock") < 0) ?
    "none" : "block";

If you're not familiar with ternary operators, that is what I used in the last line . . . it's basically a one-condition, two-option, one-line, if statement. The code says, "if 'in-stock' is in the sStockName string value, then assign 'block' as the display value, otherwise, use 'none'"

More info on ternaries here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

maioman · Accepted Answer · 2015-06-09 14:59:10Z

1

in pure Js it's:

var p= document.querySelector("p")

 if (p.className.match(/\bin-stock\b/)) {
document.querySelector("#contact-form").style.display = 'block';
}else{
document.querySelector("#contact-form").style.display = 'none';
}

fiddle

fiddle2 ---the one with display block---

edited Jun 9, 2015 at 14:59

answered Jun 9, 2015 at 14:43

maioman

18.8k4 gold badges39 silver badges46 bronze badges

1 Comment

maioman Over a year ago

@cookney strange; in my example it's working.. look at fiddle

4nti · Accepted Answer · 2015-06-09 14:50:10Z

0

if there is 1 contact form per product then put div of contact form inside product and hide with css :

.in-stock + .showOrHide
{
    display:block;
}

.sold + .showOrHide
{
    display:none;
}

https://jsfiddle.net/o379yqy5/1/

edited Jun 9, 2015 at 14:50

answered Jun 9, 2015 at 14:24

4nti

1961 silver badge14 bronze badges

2 Comments

FoamyMedia Over a year ago

i want to hide the contact form if the product is out of stock, so the above example doesnt work.

4nti Over a year ago

Then your example is not clear because there is 1 form but 2 products in your example ... 1 in-stock and 1 out-of-stock, what should the result be for your example ? Is there a contact form per product ? or is there only 1 product and 1 contact form normally ?

Collectives™ on Stack Overflow

Show Or Hide Div Based On CSS Class

4 Answers 4

4 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related