在 mozilla 官方站点 看到这个效果。是用 javascipt 来实现的。

纯 css 模拟的效果如下：

• 标题

  文字文字文字文字文字文字文字文字文字文字文字文字文字




• 标题

  文字




• 标题

  文字




• 标题

  文字

浏览器宽度小于 600 时，变成上下 accordin（手风琴效果）

下载 less 源文件 查看 css 源文件

mozilla 站点的 js 代码真的好罗嗦啊

var g = {
  expandHorz: function(l) {
    f(".panel-title").stop(true, true).fadeOut(200);
    l.stop().removeClass("compressed").addClass("expanded").animate({
      width: "64%"
    }, 700);
    f(".panel-content", l).stop(true, true).delay(400).fadeIn(400);
    l.siblings(".panel").stop().removeClass("expanded").addClass("compressed").animate({
      width: "12%"
    }, 700);
    l.siblings(".panel").find(".panel-content").stop(true, true).fadeOut(400, function() {
      f(this).delay(500).removeAttr("style")
    });
    i("open", (f(".panel").index(l) + 1), l.attr("id"))
  },
  contractHorz: function() {
    f(".panel").stop().animate({
      width: "25%"
    }, 700, function() {
      f(".panel-title").fadeIn(250)
    }).removeClass("expanded compressed");
    f(".panel-content").stop(true, true).delay(200).fadeOut(500)
  },
  expandVert: function(l) {
    f(".panel-title").stop(true, true).fadeOut(200);
    l.stop().removeClass("compressed").addClass("expanded").animate({
      height: "22em"
    }, 700);
    l.siblings(".panel").stop().removeClass("expanded").addClass("compressed").animate({
      height: "3em"
    }, 700);
    f(".panel-content", l).stop(true, true).delay(400).fadeIn(400);
    l.siblings(".panel").find(".panel-content").stop(true, true).fadeOut(400, function() {
      f(this).delay(500).removeAttr("style")
    });
    i("open", (f(".panel").index(l) + 1), l.attr("id"))
  },
  contractVert: function() {
    f(".panel").stop().animate({
      height: "4.5em"
    }, 700, function() {
      f(".panel-title").fadeIn(250)
    }).removeClass("expanded compressed");
    f(".panel-content").stop(true, true).fadeOut(500)
  },
};
var h = 200;
var a;
f(".accordion").on("mouseleave", function() {
  clearTimeout(a);
  h = 200
});
f(".panel").hover(function() {
  var l = f(this);
  clearTimeout(a);
  a = setTimeout(function() {
    if (e) {
      g.expandHorz(l)
    } else {
      g.expandVert(l)
    }
    h = 0
  }, h)
}, function() {
  if (e) {
    g.contractHorz(f(this))
  } else {
    g.contractVert()
  }
});
f(".panel").on("click focus", function(l) {
  if (!f(this).hasClass("expanded")) {
    if (e) {
      g.expandHorz(f(this))
    } else {
      g.expandVert(f(this))
    }
  }
});
f(".panel > a").on("blur", function() {
  if (e) {
    g.contractHorz()
  } else {
    g.contractVert()
  }
});