Designing interactive elements that conceal individual paragraphs

Question

Designing interactive elements that conceal individual paragraphs

I am working on a project that involves 3 buttons and 3 paragraphs. My goal is to create a JavaScript function that will hide all paragraphs except the one with the same letter as the button clicked. I want to achieve this by applying a CSS rule that adds the class "hidden".

After trying various methods, I have only been able to toggle the hidden class for all paragraphs. Can someone provide guidance on how I can accomplish this task?

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");
  }
}

.hidden {
  display: none;
}

<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>

javascript html css

Answer 1

Answer №1

If you are looking to solve this issue using JavaScript instead of relying on the linked duplicate, then this answer is for you. However, if it turns out to be a duplicate, please mark it as such and both the question and this answer will be automatically removed in 30 days.

In contemporary JavaScript practices, it is advisable to separate HTML and JS functionalities. This separation allows for better caching and reusability of JS code across multiple HTML pages. By avoiding direct coupling through attributes like onclick, making changes becomes easier as modifications can be done in one location only, rather than in multiple files. Therefore, it is recommended to utilize addEventListener for this purpose.

To start, you need to select all the buttons you want to work with using querySelectorAll. This method returns a Node List, which is akin to an array-like object containing a list of elements. Consequently, you must iterate through this list using looping methods such as for-loops or forEach.

You can initially add an event listener to each button along with an anonymous function (similar to lambda) to extract information, such as a data-attribute representing the target element's id.

Subsequently, iterate through the paragraphs in a similar manner as before with the buttons. You can employ

classList.toggle('class', statement)

to apply a class based on the truth value of the statement to toggle visibility.

const BUTTONS = document.querySelectorAll('button');
const PARAGRAPHS = document.querySelectorAll('p');

BUTTONS.forEach(button => {
  button.addEventListener('click', function() {
    PARAGRAPHS.forEach(paragraph => {
      paragraph.classList.toggle('d-none', paragraph.id !== this.dataset.id)
    })
  })
})

.d-none {
  display: none;
}

  <button data-id="paraA">A</button>
  <button data-id="paraB">B</button>
  <button data-id="paraC">C</button>
  <br>
  <p id="paraA">A</p>
  <p id="paraB">B</p>
  <p id="paraC">C</p>

Answer 2

If you are looking to solve this issue using JavaScript instead of relying on the linked duplicate, then this answer is for you. However, if it turns out to be a duplicate, please mark it as such and both the question and this answer will be automatically removed in 30 days.

In contemporary JavaScript practices, it is advisable to separate HTML and JS functionalities. This separation allows for better caching and reusability of JS code across multiple HTML pages. By avoiding direct coupling through attributes like onclick, making changes becomes easier as modifications can be done in one location only, rather than in multiple files. Therefore, it is recommended to utilize addEventListener for this purpose.

To start, you need to select all the buttons you want to work with using querySelectorAll. This method returns a Node List, which is akin to an array-like object containing a list of elements. Consequently, you must iterate through this list using looping methods such as for-loops or forEach.

You can initially add an event listener to each button along with an anonymous function (similar to lambda) to extract information, such as a data-attribute representing the target element's id.

Subsequently, iterate through the paragraphs in a similar manner as before with the buttons. You can employ

classList.toggle('class', statement)

to apply a class based on the truth value of the statement to toggle visibility.

const BUTTONS = document.querySelectorAll('button');
const PARAGRAPHS = document.querySelectorAll('p');

BUTTONS.forEach(button => {
  button.addEventListener('click', function() {
    PARAGRAPHS.forEach(paragraph => {
      paragraph.classList.toggle('d-none', paragraph.id !== this.dataset.id)
    })
  })
})

.d-none {
  display: none;
}

  <button data-id="paraA">A</button>
  <button data-id="paraB">B</button>
  <button data-id="paraC">C</button>
  <br>
  <p id="paraA">A</p>
  <p id="paraB">B</p>
  <p id="paraC">C</p>

Answer 3

Answer №2

Store the state using data attributes instead of classes.

You can connect an element like data-toggle and another element like data-ref.

function toggle(event) {
  const { toggle } = event.target.dataset;
  if (!toggle) return;
  toggleClass(`[data-ref="${toggle}"]`, 'hidden');
}

function toggleClass(elementOrSelector, className) {
  const el = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  el.classList.toggle(className);
}

.hidden {
  display: none;
}

<div class="button">
  <button data-toggle="a" onClick="toggle(event)">a</button>
  <button data-toggle="b" onClick="toggle(event)">b</button>
  <button data-toggle="c" onClick="toggle(event)">c</button>
</div>

<div class="main">
  <div class="text" data-ref="a">
    <p>a</p>
  </div>
  <div class="text" data-ref="b">
    <p>b</p>
  </div>
  <div class="text" data-ref="c">
    <p>c</p>
  </div>
</div>

Answer 4

Store the state using data attributes instead of classes.

You can connect an element like data-toggle and another element like data-ref.

function toggle(event) {
  const { toggle } = event.target.dataset;
  if (!toggle) return;
  toggleClass(`[data-ref="${toggle}"]`, 'hidden');
}

function toggleClass(elementOrSelector, className) {
  const el = typeof elementOrSelector === 'string'
    ? document.querySelector(elementOrSelector)
    : elementOrSelector;
  el.classList.toggle(className);
}

.hidden {
  display: none;
}

<div class="button">
  <button data-toggle="a" onClick="toggle(event)">a</button>
  <button data-toggle="b" onClick="toggle(event)">b</button>
  <button data-toggle="c" onClick="toggle(event)">c</button>
</div>

<div class="main">
  <div class="text" data-ref="a">
    <p>a</p>
  </div>
  <div class="text" data-ref="b">
    <p>b</p>
  </div>
  <div class="text" data-ref="c">
    <p>c</p>
  </div>
</div>

Answer 5

Answer №3

One easy way to achieve this is by utilizing the details element along with its open attribute.

You can also take it a step further by incorporating CSS for additional styling!

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

Answer 6

One easy way to achieve this is by utilizing the details element along with its open attribute.

You can also take it a step further by incorporating CSS for additional styling!

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

Answer 7

Answer №4

If you are seeking to match the content of a button with the content of a paragraph to be displayed, here is a code snippet that achieves this:

<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>
  <script>
    const buttons = document.querySelectorAll('button');
    const ps = document.querySelectorAll('p');

    function hideAllPs() {
      ps.forEach((p) => {
        p.classList.add('hidden');
      });
    }

    function findPWithSameText(text) {
      let el;
      ps.forEach((p) => {
        if (p.innerText == text) {
          el = p;
        }
      });
      return el;
    }

    hideAllPs();

    buttons.forEach((button) => {
      button.addEventListener('click', function() {
        hideAllPs();
        findPWithSameText(button.innerText).classList.remove('hidden');
      });
    });
  </script>
</body>

Although technically possible, displaying the same text in a button and then in a paragraph may not provide much value to users.

Various other approaches have been suggested for linking buttons to corresponding paragraphs, such as using details element, placing paragraphs next to buttons, or utilizing classes, ids, or data-values. Choose a method that best suits your needs.

Answer 8

If you are seeking to match the content of a button with the content of a paragraph to be displayed, here is a code snippet that achieves this:

<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>
  <script>
    const buttons = document.querySelectorAll('button');
    const ps = document.querySelectorAll('p');

    function hideAllPs() {
      ps.forEach((p) => {
        p.classList.add('hidden');
      });
    }

    function findPWithSameText(text) {
      let el;
      ps.forEach((p) => {
        if (p.innerText == text) {
          el = p;
        }
      });
      return el;
    }

    hideAllPs();

    buttons.forEach((button) => {
      button.addEventListener('click', function() {
        hideAllPs();
        findPWithSameText(button.innerText).classList.remove('hidden');
      });
    });
  </script>
</body>

Although technically possible, displaying the same text in a button and then in a paragraph may not provide much value to users.

Various other approaches have been suggested for linking buttons to corresponding paragraphs, such as using details element, placing paragraphs next to buttons, or utilizing classes, ids, or data-values. Choose a method that best suits your needs.

Designing interactive elements that conceal individual paragraphs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Add a +1/Like/Share feature to enhance the user experience of your mobile web

JavaScript ES6 array method for generating an object from an array

Steps for positioning a div beside a centered div

Utilizing the fetch method for sending cross-origin JSON data to an Express backend

Creating a dynamic link in Vue JS is a cinch!

Toggle the panel upwards using jQuery's slideToggle function

jquery survey quiz

Intermittent issue with Webdriver executeScript failing to detect dynamically created elements

Dynamic field validation using jQuery

Image positioned at the top with text links situated at the bottom thanks to Flexbox

Issue with PHP Form data not syncing with MySQL Database

You won't find the property 'includes' on a type of 'string[]' even if you're using ES7 features

Configuring Dialog Placement to the Top in Material-UI

Unable to apply Login Form Css to HTML

Completely charting the dimensions of an unfamiliar object (and the most effective method for determining its extent)

Here is a guide on determining the date variance in PHP by leveraging jQuery

JavaScript: Techniques for extracting multiple digits from a text

What is the best way to align text in "reverse order" to the center?

Configuring hostname and port within next.config.js with next.js

When inserting <img>, unwanted gaps appear between div elements