Html Question posted in
Some basic documentation can be found here.

Html – Creating buttons that hide their respective paragraph

I’m a newbie to HTML, CSS and JavaScript and I’d like some help.

Let say I have 3 buttons and 3 paragraphs

<head>
<style>
.hidden {
display: none;
}
</style>
</head>

<body>
<button>A</button>
<button>B</button>
<button>C</button>
<br>
<p>A</p>
<p>B</p>
<p>C</p>
</body>

I want to create a js function that hides all paragraphs except the one with the same letter as the button, using a CSS rule that apply the class "hidden".

I tried many things but all I can do is to toggle the class hidden to all paragraphs. Can someone explain me how I can do that please?

Thank you!

Here’s the file I was using to test anything I could think of to find a solution

<!doctype html>
<html>
<head>
 <title></title>
 <style>
 .hidden {
 display: none;
 }
 </style>
</head>
<body>
<div class="button">
 <button class="a" onClick="toggle(this,id)">a</button>
 <button class="b" onClick="toggle(this,id)">b</button>
 <button class="c" onClick="toggle(this,id)">c</button>
</div>
<div class="main">
<div class="a text">
 <p>a</p>
</div>
<div class="b text">
 <p>b</p>
</div>
<div class="c text">
 <p>c</p>
</div>
</div>
 <script>
function toggle(clicked,id) {
var el = document.querySelectorAll(".text");
var length = el.length;
for (let i=0; i<length; i++){
el[i].classList.add("hidden");
}
}
 </script>
</body>
</html>

To avoid switching from different files I wrote all the CSS and JS in the HTML file.

Tags:

2

Answers


  1. 0

    I tried to put the respective comment before every JavaScript code, hope it helps you.

    // Function to hide all paragraphs and show the selected one
function showParagraph(letter) {
  // Get all paragraphs
  const paragraphs = document.querySelectorAll('p');

  // Hide all paragraphs
  paragraphs.forEach(para => {
    para.classList.add('hidden');
  });

  // Show the paragraph that matches the button clicked
  const selectedParagraph = document.getElementById(`para${letter}`);
  if (selectedParagraph) {
    selectedParagraph.classList.remove('hidden');
  }
}

// Add event listeners to buttons
document.getElementById('buttonA').addEventListener('click', () => showParagraph('A'));
document.getElementById('buttonB').addEventListener('click', () => showParagraph('B'));
document.getElementById('buttonC').addEventListener('click', () => showParagraph('C'));
    .hidden {
  display: none;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hide Paragraphs Example</title>
</head>

<body>
  <button id="buttonA">A</button>
  <button id="buttonB">B</button>
  <button id="buttonC">C</button>
  <br>
  <p id="paraA">A</p>
  <p id="paraB">B</p>
  <p id="paraC">C</p>

</body>

</html>

    The part para${letter} simply checks for letter A, B, C and maps it to para i.e; paraA, etc. In JavaScript, Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

    Login or Signup to reply.
  2. 0

    It could be done in a quite simple way using the details element, with the use of his open attribute.

    Further enhancement can be done by using CSS!

    document.body.querySelectorAll('summary').forEach((e) => e.addEventListener("click", (e) => {
   document.body.querySelectorAll('details').forEach((e) => (e.hasAttribute('open')) ? e.removeAttribute('open') : '')
}))
    <details>
    <summary>A</summary>
    A content
</details>

<details>
    <summary>B</summary>
    B content
</details>

<details>
    <summary>C</summary>
    C content
</details>

    Source

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search