Using Javascript to show and hide text

Hi all, beginner coding baby here, thanks in advance for the help.

I have two buttons that each show and hide two different blocks of text when you click the respective button. Right now, the two blocks of text stack on top of each other when both buttons have been clicked, however, I’d like to have a text block replace the other text block. Any suggestions on how to do this?

Here’s a link to the WIP code.

Thanks again.

1 Like

try setting the images display to “initial” not “block” because i dont think images are usually displayed as block

1 Like

Firstly, damn, arty website. I really like it.

Secondly, do I understand that you want the following:

  • Initial state: Neither Info nor Book text is showing
  • Click Info - Info Block Appears
  • Click Book - The Info block disappears and the Book block replaces it?

If so, here is what I would do:

1. Replace the info-panel and book-panel classes with a generic hide class

.hide {
  display: none;
}

2. Change the HTML accordingly

Use the hide class instead of the old ones.

      <div class="item1">
        <div id="demo1" class="hide">
            <button id="x1" class="x-out" type="button">
            ...SNIP...
        
        <div id="demo2" class="hide">
            <button id="x2" class="x-out" type="button">

3. Change the JavaScript

I’d use a system like this where we store “which panel is open” and then use an update function to keep the screen in sync with that variable.

var panelShowing = null;
function updatePanels() {
  const panelNames = ["demo1", "demo2"];
  for (let panelName of panelNames) {
    const panel = document.getElementById(panelName);
    if (panelName === panelShowing) panel.classList.remove("hide");
    else panel.classList.add("hide");
  }
}

var button = document.getElementById("btn1");
button.addEventListener("click", function() {
  panelShowing = "demo1";
  updatePanels();
});

var buttona = document.getElementById("btn2");
buttona.addEventListener("click", function() {
  panelShowing = "demo2";
  updatePanels();
});

var closetext = document.getElementById("x1");
closetext.addEventListener("click", function() {
  panelShowing = null;
  updatePanels();
});

var closetext2 = document.getElementById("x2");
closetext2.addEventListener("click", function() {
  panelShowing = null;
  updatePanels();
});

4. (Bonus) Rename demo1 and demo2 to meaningful names

You will also need to update the panelNames array if you do this.

5. (Bonus) Have only one close button

This is left as an exercise for the reader…

If you move the close button outside of the panel, you can change the updatePanels function so that it also chooses to show/hide the close button. Then you only need to attach an event handler to one button instead of one-per-panel. The code of the close button stays the same; set panelShowing to null and run the update.

I remixed your Glitch to test these changes. To see it altogether, check it out here: regal-knowledgeable-pond

Hope it helps! Keep being creative! :sparkles::art::framed_picture:

3 Likes

Hi SteGriff - this is incredibly helpful and works great. Thank you so much for so generously taking the time to help me find a solution and explain everything so thoroughly… and for the extra tips on how to clean up my work! Very, very appreciative :pray:

1 Like

Oh! I do have a follow up question…

I’ve noticed now that on the second click on the button, the corresponding panel doesn’t disappear anymore (i.e. click “info” and panel opens, then click “info” a second time and the panel closes). Any thoughts on how to maintain that function?

thanks! :blush:

Sure!

Here’s what one of your button handlers would look like after this fix:

var button = document.getElementById("btn1");
button.addEventListener("click", function() {
  panelShowing = panelShowing == "demo1" ? null : "demo1";
  updatePanels();
});

A bit complicated to read, but the long line now means “if panelShowing is demo1, make it null, otherwise make it demo1”. This is called a ternary expression. It’s like an all-in-one if statement that sets a single value.

Careful to copy the different equals signs exactly as above; single = means set a value, double == means compare a value.

Copy this idea to the other handler and you should be good to go (I haven’t tested it) :slight_smile:

1 Like