CODEWITHSUNDEEP
javascripthtmlcss
rishi
rishi

Reputation: 640

button to toggle between 2 layouts is not working with javascript

My idea is to provide a switch which toggles between a bootstrap carousel and cards, basically one of them will be visible when the the button is pressed(one will be invisible at all times). First I'm trying to make my carousel(existing) invisible, however my javascript code isn't working. I'm pretty new to javascript, I hope I'm not making some stupid mistake. Any help is appreciated, thank you.

function change(toggles) {
  var which = document.getElementById("format1");
  if (toggles.value == "yes") {
    format1.style.display = "block";
    toggles.value = "no";
  } else {
    toggles.value = "yes";
  }
};
<div class=" container container1">
  <br>
  <div class="card card-body" id="card-mine">
    <span>[...]</span>
  </div>

  <div id="format1">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
      <ol class="carousel-indicators" style="margin-bottom: 3%;">
        [...]
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->

        <div class="carousel-item active" style="background-color: green">
          [...]
        </div>

        <!-- Slide Five - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-color: #8D6E63">
          [...]
        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        </a>
      </div>

      <br>
    </div>

  </div>
  <button id="toggles" class="button toggles" value="yes" onclick="change(this)">Click</button>
</div>

Upvotes: 0

Views: 64

Answers (1)

henok
henok

Reputation: 894

I tried your code and the problem is in the logic, you are setting it to visible on the first if block, it was suppose to be invisible.

  if (toggles.value == "yes") {
    which.style.display = "none";
    toggles.value = "no";
  } else {
    toggles.value = "yes";
    which.style.display = "block";
  }

Upvotes: 1

Related Questions