Pure CSS/HTML Dropdown With Anchors

Question

I want a user to be able to click on a part of a div, and then the div will expand with the information. Yet I do not want to use PHP or Javascript for this. I found this interesting link: Pure CSS collapse/expand div, and the link: http://jsfiddle.net/eJX8z/. Now I want to do the same thing (as the JSfiddle). Yet my problem is it does not seem to work!

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

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

Update:

How would I achieve this with the following 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>

I tried the ~ Connector again but it did not work. :(

score 2 · Accepted Answer · answered Mar 16 '15 at 21:50

2

I think this should solve the problem. The sibling selector ~

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

answered Mar 16 '15 at 21:50

Stickers

75,527
23
147
186

Sorry to bother you, but I have one more small question :) I edited the question. – michael jones Mar 16 '15 at 22:40

score 0 · Answer 2 · answered Mar 25 '16 at 15:48

Pure CSS

Here's how you could achieve the desired effect of the original question in pure 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>

(see also this Fiddle)

JavaScript

While there is no way to achieve the same effect with the HTML provided in the edit of the question in pure CSS, the amount of JavaScript needed is very limited :

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>