带锚点的纯CSS / HTML下拉列表

Question

我希望用户能够点击div的一部分，然后div将随信息一起展开。但我不想使用PHP或Javascript。我找到了这个有趣的链接： Pure CSS collapse/expand div ，以及链接： http://jsfiddle.net/eJX8z/ 。现在我想做同样的事情（就像JSfiddle一样）。但我的问题是它似乎不起作用！

---

我的HTML：

<a href="#hidemore" class="hidemore col-xs-12" id="hidemore">More</a>
<a href="#showmore" class="showmore col-xs-12" id="showmore">Less</a>
    <div class="col-xs-2 itemtoshow">
        <img src="image.png" id="holderspecs">
    </div>
    <div class="col-xs-2 itemtoshow">
        <img src="image.png" id="holderspecs">
    </div>
    <div class="col-xs-2 itemtoshow">
        <img src="image.png" id="holderspecs">
    </div>

我的CSS：

.itemtoshow {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.showmore {
    display: none; 
}
.hidemore:target + .showmore {
    display: inline; 
}
.hidemore:target {
    display: none; 
}
.hidemore:target > .itemtoshow{
    display:block; 
}

.hidemore,
.showmore {
    font-size: 150%;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    color: #474747;
}

---

更新

如何使用以下HTML实现此目的？

<a href="#postallionshowmore" class="postallionshowmore col-xs-12" id="postallionshowmore">More</a>
<div class="col-xs-12">
    <div class="col-xs-2 postallionitemtoshow">
        <img src="http://localhost/postin'/images/defaultprofileimage.png" id="postallionholderspecs">
    </div>
    <div class="col-xs-2 postallionitemtoshow">
        <img src="http://localhost/postin'/images/defaultprofileimage.png" id="postallionholderspecs">
    </div>
    <div class="col-xs-2 postallionitemtoshow">
        <img src="http://localhost/postin'/images/defaultprofileimage.png" id="postallionholderspecs">
    </div>
</div>

我再次尝试了〜连接器，但它无效。 ：（

Answer 1

我认为这应该可以解决问题。兄弟选择器~

.hidemore:target ~ .itemtoshow{
    display:inline; 
}

Answer 2

纯CSS

以下是如何在纯CSS中实现原始问题的预期效果：

＆＃13;

＆＃13;

.itemtoshow,
.showmore,
.hidemore:target {
    display: none; 
}

.hidemore:target + .showmore,
.hidemore:target ~ .itemtoshow {
    display:block; 
}

.hidemore,
.showmore {
    font-size: 150%;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    color: #474747;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<a href="#hidemore" class="hidemore col-xs-12" id="hidemore">More</a>
<a href="#showmore" class="showmore col-xs-12" id="showmore">Less</a>
<div class="col-xs-2 itemtoshow">
    <img src="https://www.gravatar.com/avatar/4ffc7818a205949f2f2d19dde52bb14b?s=32&d=identicon&r=PG&f=1" id="holderspecs">
</div>
<div class="col-xs-2 itemtoshow">
    <img src="https://i.stack.imgur.com/mRsBv.png?s=32&g=1" id="holderspecs">
</div>
<div class="col-xs-2 itemtoshow">
    <img src="https://i.stack.imgur.com/4hb0m.png?s=32&g=1" id="holderspecs">
</div>

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）

的JavaScript

虽然无法用纯CSS中的问题编辑中提供的HTML实现相同的效果，但所需的JavaScript数量非常有限：

＆＃13;

＆＃13;

document.getElementById('postallionshowmore').addEventListener('click', function(e) {
    e.target.nextElementSibling.classList.toggle('show');;
});

＆＃13;

.postallionshowmore {
    font-size: 150%;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    color: #474747;
}

.postallionitemtoshow {
    display: none;
}

.show .postallionitemtoshow {
    display: block;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<a href="#postallionshowmore" class="postallionshowmore col-xs-12" id="postallionshowmore">More</a>
<div class="col-xs-12">
    <div class="col-xs-2 postallionitemtoshow">
        <img src="https://www.gravatar.com/avatar/4ffc7818a205949f2f2d19dde52bb14b?s=32&d=identicon&r=PG&f=1">
    </div>
    <div class="col-xs-2 postallionitemtoshow">
        <img src="https://i.stack.imgur.com/mRsBv.png?s=32&g=1">
    </div>
    <div class="col-xs-2 postallionitemtoshow">
        <img src="https://i.stack.imgur.com/4hb0m.png?s=32&g=1">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

（另见this Fiddle）