Member Avatar for minghags

I need to create 3-4 buttons that are colored when pressed, but when one button is pressed it turns for example red other ones become grey. But this must happen on the same site like selection for example. I didnt maanage to do anything till now, if someone could just point me to right direction what to search i would really appriciate it.

If there is some JS it would be nice...

  • 3 Contributors
  • 3 Replies
  • 232 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by Benjamin_11

Dani AI

Generated

A simple, robust pattern is to use semantic <button> elements, toggle a single CSS class (and aria-pressed) on click, and clear it from the others. That answers the original request and builds on 's jQuery suggestion while avoiding external demos that sometimes fail in certain environments (as reported). This approach works without jQuery, stays accessible, and is easy to debug.

HTML (inline buttons with aria state):

<div class="choice-row" role="radiogroup" aria-label="Color selection">
  <button type="button" class="choice" aria-pressed="false">One</button>
  <button type="button" class="choice" aria-pressed="false">Two</button>
  <button type="button" class="choice" aria-pressed="false">Three</button>
</div>

Minimal CSS to show selection:

.choice { background:#eee; border:1px solid #ccc; padding:8px 12px; margin-right:6px; cursor:pointer; }
.choice[aria-pressed="true"] { background:#c00; color:#fff; }
.choice:focus { outline:2px solid #06f; }

Tiny JavaScript (no library required):

document.addEventListener('DOMContentLoaded', function () {
  var row = document.querySelector('.choice-row');
  if (!row) return;
  var buttons = row.querySelectorAll('.choice');

  row.addEventListener('click', function (e) {
    var btn = e.target.closest('button');
    if (!btn) return;
    buttons.forEach(function (b) {
      b.setAttribute('aria-pressed', 'false');
      b.classList.remove('active');
    });
    btn.setAttribute('aria-pressed', 'true');
    btn.classList.add('active');
  });

  row.addEventListener('keydown', function (e) {
    var list = Array.prototype.slice.call(buttons);
    var index = list.indexOf(document.activeElement);
    if (index === -1) return;
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') list[(index + 1) % list.length].focus();
    if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')   list[(index - 1 + list.length) % list.length].focus();
  });
});

Troubleshooting tips: if a demo "doesn't work" in Chrome/Ubuntu, open DevTools Console for errors, confirm scripts load (and in the right order), use defer or place scripts just before </body>, and try incognito to rule out blocking extensions. If you do want jQuery, the same logic is just .removeClass() / .addClass() — but the plain JS above avoids CDN or version problems.

Recommended Answers

All 3 Replies

Member Avatar for shophiarajan47

Hey Benjamin_11 the demo there not working in Ubuntu Chrome.

Is there any problem?

Can you tell same example from othere source?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.