Search code examples
javascriptcsshoverhighlightexpand

Is there a cross browser way to expand text on click via css?

First, here is what I would like to do:

Row 1
Row 2
Row 3

I have code setup so that when I hover over row1, 2 or 3, the row gets highlighted. This is done via css.

I would like to be able to (for instance) click row1 and then it would look like this:

Row 1
  Some text here
Row 2
Row 3

That text would stay there until I clicked on a different row at which point it would go away. For instance, let's say I clicked on row 2 next.

Row 1
Row 2
  Even more text here
Row 3

I have found code that talks about using javascript to do this and setting the visibility of the text but I'm not sure how I can do this without having a ton of near duplicate code...

Solution

  • If you have more javascript than the needed for this feature jQuery is justified and it will come handy. With jQuery, it would be something like 

    $(".classOfYourRows").
    click(function(){
        $(".classOfChildren").hide();
        $(".classOfChildren", this).show();

    });