Using Buttons To Show Particular Divs and hide the rest

Question

Using Buttons To Show Particular Divs and hide the rest

79 Views Asked by OneRyt At 10 January 2023 at 22:43

OK, I'm still mind boggled. I've done a ton here, and still can't see why the things aren't loading. I thought maybe it had to do with CORS, so I added a cookies rule to the script, but even then I find this weird, because I was able to display the podcast player locally just fine when I wasn't trying to hide and activate one or the other.

The code seems to be just fine however, I can't seem to pick out the problem.

document.cookie = "cookiename=cookievalue; SameSite=None; Secure; path="
  // Add active class to default player and button
  document.getElementById("player1-button").classList.add("active");
  document.getElementById("player1").classList.add("active");

  // Add event listeners to the buttons to listen for clicks and execute a function
  document.getElementById("player1-button").addEventListener("click", function() {
    //Remove active class from the current player and button
    document.getElementById("player2-button").classList.remove("active");
    document.getElementById("player2").classList.remove("active");
    // Add active class to player1 and player1-button
    document.getElementById("player1").classList.add("active");
    this.classList.add("active");
  });
  document.getElementById("player2-button").addEventListener("click", function() {
    //Remove active class from the current player and button
    document.getElementById("player1-button").classList.remove("active");
    document.getElementById("player1").classList.remove("active");
    // Add active class to player2 and player2-button
    document.getElementById("player2").classList.add("active");
    this.classList.add("active");
  });

This is my new javascript.

Furthermore, here's the related CSS:

.podcast-player div:not(.active) {
  display: none;
}
.podcast-player div.active {
  display: block;
  
    }

and as well, the HTML for the player element:

<div class="podcast-player">
          <!-- add the 2 embedded players here -->
          <div id="player1">
            <div id='buzzsprout-small-player'></div>
            <script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-small-player&player=small'></script>
          </div>
          <div id="player2">
            <div id='buzzsprout-large-player'></div>
            <script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-large-player&player=large'></script>
          </div>
        </div>

I've been combing through this for the past few hours, and to me it all seems like it should work. I'm baffled.

Original Q&A

There are 1 best solutions below

**Chootti** · Answer 1 · 2023-01-11T11:50:19.463000

Can you check the following code, and let me know if this is what you were looking for?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .player {
      display: none;
    }

    .player.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="player active" id='buzzsprout-small-player'></div>
  <div class="player" id='buzzsprout-large-player'></div>

  <button disabled id="small-player-button">Activate Player Small</button>
  <button id="large-player-button">Activate Player Large</button>

  <script type='text/javascript' charset='utf-8'
    src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-large-player&player=large'></script>
  <script type='text/javascript' charset='utf-8'
    src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-small-player&player=small'></script>
  <script>
    // Add event listeners to the buttons to listen for clicks and execute a function
    document.getElementById("small-player-button").addEventListener("click", function () {
      //Remove active class from the large player
      document.getElementById("buzzsprout-large-player").classList.remove("active");
      // Add active class to small player
      document.getElementById("buzzsprout-small-player").classList.add("active");

      // Enable large player button
      document.getElementById("large-player-button").disabled = false;
      // Disable small player button
      this.disabled = true;
    });

    document.getElementById("large-player-button").addEventListener("click", function () {
      //Remove active class from the small player
      document.getElementById("buzzsprout-small-player").classList.remove("active");
      // Add active class to large player
      document.getElementById("buzzsprout-large-player").classList.add("active");

      // Enable small player button
      document.getElementById("small-player-button").disabled = false;
      // Disable large player button
      this.disabled = true;
    });

  </script>

</body>

</html>

Using Buttons To Show Particular Divs and hide the rest

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in BUTTON

Related Questions in VISIBLE

Trending Questions

Popular # Hahtags

Popular Questions