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 get my “Register Now!” Link's to line up at the bottom using CSS

    How to stick a div when scrolled past 50% of the item?

    How to Center-Justify links in CSS?

    CSS How to set div height 100% minus nPx

    How to do Background Image horizontal slide

    CSS: How to change the color of the bottom right square of the scrollbar in webkit?

    How to override parent containers width property in CSS [duplicate]

    How to force elements to stay in the same row

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    How to Prefix this Input element, using CSS

    How to properly style current_page_item based from theme

    How to make attractive dropdown menu using css3? [closed]

    How can I fill with the color and make it square using CSS?

    How to put a border on a triangle shape using css?

    How do I add another css to Bootstrap?

    how to add a fixed position Box on left side of each post [closed]

    How to apply css rules to html element using ExtJS?

    How to apply a CSS class to a SVG Text element

    CSS: how to “plot” invisible text over an image?

    How to use jQuery's flag to swap CSS display property

    How to make cards on the image

    How to cycle odd and even when using ajax append?

    How Do I Add product descriptions (short) to hover box in woocommerce?

    How to use CSS timing functions to animate an arc?

    How to stop one layer going over another

    How do you wrap long words on newline, and avoid horizontal scroll using CSS?

    How to style xml file? from xml to html using xslt and style that html using css [closed]

    How can I force form elements to render the same across browsers?

    How do I change image A when hovering over image B without JavaScript only CSS

    HTML/CSS: How to center floating divs?