#toggle btn html/css help

1 messages · Page 1 of 1 (latest)

south stagBOT
#

<@&987246964494204979> please have a look, thanks.

south stagBOT
#

While you are waiting for getting help, here are some tips to improve your experience:

Code is much easier to read if posted with syntax highlighting and proper formatting.

If nobody is calling back, that usually means that your question was not well asked and hence nobody feels confident enough answering. Try to use your time to elaborate, provide details, context, more code, examples and maybe some screenshots. With enough info, someone knows the answer for sure.

Don't forget to close your thread using the command </help-thread close:1027500463647621170> when your question has been answered, thanks.

blazing thicket
south stagBOT
#

Here is an AI assisted attempt to answer your question 🤖. Maybe it helps! In any case, a human is on the way 👍. To continue talking to the AI, you can use </chatgpt:1108714622413963314>.

#

To achieve the desired effect where only the selected text's background is fully green, you can use CSS and JavaScript. Here's an example code snippet that demonstrates this behavior:

HTML:

<div class="toggle-btn">
  <button onclick="toggleText(1)">Text 1</button>
  <button onclick="toggleText(2)">Text 2</button>
</div>

<div id="text-container">
  <p id="text-1">This is text 1.</p>
  <p id="text-2">This is text 2.</p>
</div>

CSS:

.toggle-btn button {
  background-color: white;
}

.toggle-btn button.selected {
  background-color: green;
}

#text-container p {
  background-color: white;
}

#text-container p.selected {
  background-color: green;
}

JavaScript:

function toggleText(textId) {
  // Remove 'selected' class from all buttons and paragraphs
  const buttons = document.querySelectorAll('.toggle-btn button');
  buttons.forEach(button => button.classList.remove('selected'));

  const paragraphs = document.querySelectorAll('#text-container p');
  paragraphs.forEach(paragraph => paragraph.classList.remove('selected'));

  // Add 'selected' class to the clicked button and paragraph
  const selectedButton = document.querySelector(`.toggle-btn button:nth-child(${textId})`);
  selectedButton.classList.add('selected');

  const selectedParagraph = document.querySelector(`#text-container p:nth-child(${textId})`);
  selectedParagraph.classList.add('selected');
}

In this example, we have a container div with two buttons representing the texts, and a separate div containing the paragraphs of each text. When a button is clicked, the toggleText function is called with the corresponding text ID (1 or 2). The function removes the 'selected' class from all buttons and paragraphs, and then adds the 'selected' class to the clicked button and paragraph. The CSS rules define the background color for the selected elements.

blazing thicket
#

rn i have it so the entire div container's background is green but i only want the selected text 1/2 to be have a background filling of green but idk how to do that???

i've tried multiple times u can look thru the comments in the css code

lament zinc
#

Dont use caps