带有Anchors的纯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中实现原始问题的预期效果：

​

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

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

​

(另见this Fiddle)

JavaScript

虽然在纯CSS中编辑问题时提供的HTML无法达到同样的效果，但所需的JavaScript数量非常有限：

​

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

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

.postallionitemtoshow {
    display: none;
}

.show .postallionitemtoshow {
    display: block;
}

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

​

(另见this Fiddle)