ansaurus

Question

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

Answer 1

+1 A:

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

Nadia Alramli 2009-05-08 23:30:01

Answer 2

+6 A:

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

    });

Miquel 2009-05-08 23:32:36

Answer 3

+2 A:

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.

zombat 2009-05-08 23:36:18

Answer 4

+3 A:

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.

Aistina 2009-05-08 23:40:20

Good solution for standards browsers, not sure if IE will get it right. Did you test cross-browser?

DisgruntledGoat 2009-05-10 21:56:01

Seems fine in IE8, but it stops working when I switch to IE7 mode. Though I have a hunch that if you use 'a' tags instead of divs, it will also work in IE7.

Aistina 2009-05-10 23:03:14

Answer 5

+1 A:

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.

roryf 2009-05-09 14:55:58

ansaurus

tags:

views:

answers:

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

related questions