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

StackOverflow https://stackoverflow.com/questions/842228

Question

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

Was it helpful?

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();

    });

OTHER TIPS

CSS:

.outer {
  display: block;
}

.outer .inner {
  display: none;
  margin-left: 10px;
}

.outer:hover {
  background-color: #EEEEEE;
}

.outer:active .inner {
  display: block;
}

HTML:

<div class="outer">
    Row 1
    <div class="inner">some text</div>
</div>
<div class="outer">
    Row 2
    <div class="inner">some text</div>
</div>
<div class="outer">
    Row 3
    <div class="inner">some text</div>
</div>

I think that's as close as you can get without using Javascript.

Edit: I think I may have misread the question, I thought he didn't want to use Javascript. Oh well, I'll leave my answer up anyway.

The only real cross-browser way to handle this is with Javascript, as unfortunately many older browsers did not support :hover pseudo classes on anything other than anchor elements.

You might want to check out MooTools for their Fx.Slide effect, or as everyone else invariably mentioned, JQuery.

I would probably just use jQuery for this as well, but since the OP didn't mention that at all here is a plain-old JavaScript solution, only tested on FF3/Mac but reasonably confident it's cross-browser (please correct me if I'm wrong):

<html>
    <head>
        <style type="text/css">
        #data h2 {
            /* colour should be same as BG colour, stops element expanding 
                on hover */
            border: 1px solid #fff;
            /* indicates to user that they can do something */
            cursor: pointer;
        }

        #data h2:hover { /* Note this isn't supported in IE */
            border: 1px solid #333;
        }

        .hidden p {
            display:none;
        }
        </style>
        <script type="text/javascript">
        function init() {
            var list = document.getElementById('data');
            var rows = list.getElementsByTagName('li');
            var active;
            for(var i = 0; i < rows.length; i++) {
                var row = rows[i];
                // Hide if not the first, otherwise make active
                if(i != 0) {
                    row.className = "hidden";
                } else {
                    active = row;
                }
                row.getElementsByTagName('h2').item(0).onclick = function() {
                    active.className = "hidden";
                    this.parentNode.className = "";
                    active = this.parentNode;
                }
            }
        }
        </script>
    </head>
    <body onload="init()">
        <!-- I'm using <ul> here since you didn't state the actual markup, 
            but you should be able to adapt it to anything -->
        <ul id="data">
            <li>
                <h2>Row 1</h2>
                <p>Some text here</p>
            </li>
            <li>
                <h2>Row 2</h2>
                <p>Some text here</p>
            </li>
            <li>
                <h2>Row 3</h2>
                <p>Some text here</p>
            </li>
        </ul>
    </body>
</html>

Notice that the row content is only hidden when JavaScript is enabled, an important (and often missed!) accessibility aspect.

If you want an easy cross browser way of doing it, I would strongly advice you to use jQuery

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top