Toggle function with more than one condition/outcome?

JavaScript
1

Hi,

I have created a toggle function which reveals a container when clicked, but I would also like to hide the button itself when the text is revealed (the function works fine for the container part, but I am unable to implement the button hiding in the same function as yet).

I tried to do this in a few different ways:

  1. Adding a second piece of code to be executed if the condition in the ‘if statement’ is true

  2. Adding a second piece of code to be executed if the condition in the ‘IF statement’ is true AND including the visibility status of the button in the IF statement as well (as a second condition).

  3. Creating a second toggle functions which deals with the button hiding on its own.

I have not been able to get this to work yet. Does anyone have any ideas please?

HTML for Button:

<button class = "james_joyce_button" id = 'james_joyce_button' onclick = "toggle2()" >James Joyce</button>

CSS for container and button:

.james_joyce_container {
display: none;
  border-radius: 30px;
  height: fit-content;
}

.james_joyce_button {
  margin-left: 50px;
  display: block;
}

Script:

let jjContainer = document.getElementById(
  "james_joyce_container"
); 
let jjButton = document.getElementById("james_joyce_button");

function toggle2() {
  if (jjContainer.style.display === "none") {
    jjContainer.style.display = "block"&& jjButton.style.display = "none";
  } else {
    jjContainer.style.display = "none";
  }
1 Like
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3

you are making so that the part to the right of the AND operator is not executed. Do not use the AND operator, just put the second expression on a line of its own

1 Like
4

many thanks for your help