If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery


Tags: jquery,html,css

Problem :

Might be a bit difficult to understand based on the description but the JSFiddle is here: http://jsfiddle.net/n8a76/4/

Basically what I want it to do, when you click on any of the elements in the first 3 boxes, I only want one element to be highlighted at a time. If you click on two or three elements (names, projects, etc) right now, it highlights all two or three. It only unhighlights an element when you click it again.

So I would like to see, click element 1, element 1 is highlighted. Click element 2, element 1 (in the same box) is unhighlighted, and element 2 is highlighted.

So each box, from my code it is called a dashed-panel, should be independent of the other.

So in theory, John Brown and Jack's App UI could be highlighted at the same time.

Anyone have any suggestions?



Solution :

You can just remove the class from th sibling <tr> elements in the same table, like this:

$(document).ready(function() {
  $('#clients table tr, #stages table tr, #projects table tr').click(function() {
    $(this).toggleClass('dash-elem-selected').siblings().removeClass('dash-elem-selected');
  });    
});

You can test it out here, this still allows toggling on/off as well.


    CSS Howto..

    How to position div element right below and left-aligned to another div

    How do I control the spacing between my child links in my CSS driven menu dropdown?

    How to make heading appear in different colors

    How to make Bootstrap container auto for height?

    how to style a horizontal submenu with nested

      CSS Flex Box — flex-wrap:wrap; How to style a specific line?

      how do I create unique looking angular ui bootstrap dialogs

      How to block CSS and js file loading in Google Blogger template?

      how to accomplish this border effect in css?

      How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

      How to center CSS-shapes within a wrapper in a row

      How to make a menu centered using CSS

      How to remove the bottom 1px of an inline-block (CSS)?

      What is .htc file ?How it works in Internet explorer

      How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

      How to implement Read more / Read less in pure CSS

      Hide/show block with CSS

      How to style easypiechart using CSS?

      How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

      HTML, CSS: How do I stretch an element up to the edge of the page?

      How to get cards with his content perfectly alligned

      How to change background image based on screen size, possibly with Bootstrap

      CSS: How to create colsgroup like semantic-ui way

      I want to bring css for select option. how to write for this image, sample output like this

      CSS - how to avoid class= for every single paragraph?

      How to center an image between two columns in CSS?

      How to style Repeater item background color ontap?

      How to slide down to show content of DIV using CSS/jQuery?

      How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

      How to make a hyperlink navigation bar active in CSS or javascript?