CODEWITHSUNDEEP
javascriptcsshoverhighlightexpand
GeoffreyF67
GeoffreyF67

Reputation: 11141

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

Upvotes: 3

Views: 7715

Answers (5)

roryf
roryf

Reputation: 30160

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.

Upvotes: 2

Miquel
Miquel

Reputation: 4829

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

    });

Upvotes: 7

Aistina
Aistina

Reputation: 12683

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.

Upvotes: 3

zombat
zombat

Reputation: 94167

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.

Upvotes: 2

Nadia Alramli
Nadia Alramli

Reputation: 114943

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

Upvotes: 1

Related Questions