Toggle Visibility of my Divs in JavaScript

Question

I have coded a button and some JavaScript that I thought would work with the button but it's currently not working.

I'm looking for some help to correct my code:

Button:
    <label class="switch">
      <input type="checkbox" class="whichStore"></input>
      <div class="slider round"></div>
    </label>

Divs that I want to swap the prices on when the button is clicked:
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <p>Item:</p>
      </div>
      <div class="col-lg-7 col-md-7 col-sm-6 col-xs-6">
        <p>Item Placeholder</p>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" class="priceA">
        <p><span class="money">$</span>9.99</p>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" class="priceB" style="display: none">
        <p><span class="money">$</span>8.87</p>
      </div>
      <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2"></div>
    </div>

My script:
    <script>
            document.getElementsByClassName("whichStore").onchange = function() {
              var priceA = document.getElementsByClassName("salaryA");
              var priceB = document.getElementsByClassName("salaryB");
              if (priceA.style.display == "none") {
                document.getElementsByClassName("priceA").style.display = "";
                document.getElementsByClassNames("priceB").style.display = "none";
              } else if (priceB.style.display == "none") {
                document.getElementsByClassName("priceA").style.display = "none";
                document.getElementsByClassName("priceB").style.display = "";
              }
            }
    </script>

I have my div in a modal, so when I click a word the modal pops up with the table in it. Each row of the table will have an Item Category and then the Item Name, example being Toiletries: Toilet Paper and then the price at whichever store. So if Walmart's price is $0.99 a roll and Target's is $0.75

When the modal is displayed, it'll start on Walmart's price (whatever that may be), and then if I click the button, it'll change the price to Target's price, hiding Walmart's. Then if I click the button again, it toggles back to Walmart's price.

It's not clear your question. If you put your html and javascript in jsfiddle it'll be easy to help you. — Almeida, Nov 01 '16 at 19:22
@CleverAlmeida I have a modal that my row div is in. So it displays an Item Category and then whatever the Item is.... Lets say Toiletries: Toilet Paper. At Walmart (per say) toilet paper is $0.99 a roll. When I click the button, I want Target's prices to show up ($0.75 a roll) and then when I click the button the other div should toggle back to walmarts price. So essentially the price div should show one and hide the other when the button is toggled either way — Speakmore, Nov 01 '16 at 19:25
Possible duplicate of [How to Toggle a div's visibility by using a button click](http://stackoverflow.com/questions/19074171/how-to-toggle-a-divs-visibility-by-using-a-button-click) — b.g, Nov 04 '16 at 08:35

score 1 · Accepted Answer · edited Nov 01 '16 at 22:54

1

You can use the jQuery toggle() method for this. Add this to the head of your html, to be able to use jQuery online:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

then use a separate script to make the button work. Something like this for <div id="test">:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").toggle();
    });
});
</script>

There is an example below.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

edited Nov 01 '16 at 22:54

Ubaby

37
6

answered Nov 01 '16 at 19:26

B Minster

331
3
16

Would I be able to use this with classes, so like instead of where you have button put: ".whichStore" ? Edit: Just tested on your link and I think it worked, lemme try in my code, thanks! – Speakmore Nov 01 '16 at 19:33
But this doesnt hide one div and show another, and swap them off. This just hides 1 div... – Speakmore Nov 01 '16 at 19:34
Yes, you can use classes by replacing the "#" with a "." and then the class name. – B Minster Nov 01 '16 at 19:35
So I've now put both the paragraph tags (priceA and priceB) inside the same div. However I start with B hidden. So when I toggle the button I want B to show and A to hide. This just hides A. How do I go about showing B and then visa-versa if I toggle back. I'm going to see if .show() is a command – Speakmore Nov 01 '16 at 19:42
Fixed, I just start with B hidden, and toggle both. Thanks for your help I think I got it! That was so much easier than I was making it -.- – Speakmore Nov 01 '16 at 19:48
.show() and .hide() are both jQuery methods. .toggle() uses both together. – B Minster Nov 01 '16 at 19:52
Happy to help! Glhf – B Minster Nov 01 '16 at 19:53

Toggle Visibility of my Divs in JavaScript

1 Answers1