Hide/expand text by clicking an image (CSS3/HTML5) - html

Question

I was wondering if there is a way to hide/expand the text by clicking the banner itself, as this would streamline the aesthetics even further, without the usage of any crutches. Preferably, I would like for a solution or a pointer without the involvement of Javascript.
Here is my jsfiddle of what I have done so far:
http://jsfiddle.net/Amiralen/qVR7u/
I would be grateful if it is possible to implement the function of clicking the banner itself, as it is the way I really want it to work instead of using a +/- symbol for the desired function.
Here is the HTML:
<div id="rightwrapper"><div id="demo-afghan">
<img src="http://static.squarespace.com/static/533e6e38e4b0e0ebd52168da/t/53829a06e4b011aa8ac06155/1401068038613/afghan_general.png"
class="hover"
class="img:hover"
/></a>
<p class="text">Our sister page, dedicated to Afghan history. Services provided in English and in Dari and Pashto.</p>
<article class="larticle">
<details class="ldetails">
<summary class="lsummary"></summary>
<p>
<br>
The history of Afghanistan is closely intertwined with that of Iran and the nations of Central Asia. With an eastern aspect towards India and China, Afghanistan was a cultural melting pot attesting to its multiethnic character. As a historic entity, Afghanistan comes into existence with the formation of the Hotaki dynasty; previously it had been part of a larger Iranian realm or ruled by foreign monarchs centered on the region's ancient Bactrian identity.
<br>
<br>
The banner portrays the Argali from the famous Tillya Tepe gold treasure.
</p>
</details>
</article>
</div>
</div>
Here is the CSS:
/* EXPAND TRIANGLE START */
#leftexpand summary.lsummary:-webkit-details-marker {
color: 000;
display: none;
font-size: 125%;
margin-right: 2px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
height: 10px;
font-size: 20px;
overflow: hidden;
}
summary.lsummary:after {
background: transparent;
border-radius: 5px;
content:"+";
color: #000;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details.ldetails[open] summary.lsummary:after {
content:"-";
}
summary.lsummary:focus {
outline-style: none;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
article.larticle > details.ldetails > summary.lsummary {
color: transparent;
font-size: 18px;
margin-top: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails > p {
margin-left: 24px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails details.ldetails {
margin-left: 36px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails details.ldetails summary.lsummary {
font-size: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/* EXPAND TRIANGLE END */
/* RIGHT CAPTION HOVER START */
#rightwrapper .text {
display: block;
position:relative;
text-align:right;
bottom:60px;
left:0px;
visibility:hidden;
background-color: rgba(255, 255, 255, 0.9);
top: -20px;
margin-bottom: -20px;
opacity: 0;
-webkit-transition: all 3000ms ease-out;
-moz-transition: all 3000ms ease-out;
-o-transition: all 3000ms ease-out;
-ms-transition: all 3000ms ease-out;
transition: all 3000ms ease-out;
}
#rightwrapper:hover .text {
visibility:visible;
opacity: .5;
}
/* RIGHT CAPTION HOVER END */
/* IMAGE ROLLOVER AFGHAN START */
#demo-afghan img {
opacity: .1;
background-color: #ffffff;
-webkit-transition: opacity, background-color .5s ease-out;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 2000ms;
}
#demo-afghan img:hover {
opacity: 1;
background-color: #bf0000;
-webkit-transition: opacity, background-color 1s ease-in;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 2000ms;
}
/* IMAGE ROLLOVER AFGHAN END */
I would however recommend reading the code at the jsfiddle that I have provided, for simplicity's sake. I hope there is a possible solution to this.
Thanks beforehand.

Answer 1

This is a solution that use Javascript but very minimally. Wrap the text you want to hide/show in a div with an id (I used the id text) and then add this code to your image :
onclick="document.getElementById('text').style.display = (document.getElementById('text').style.display != 'none') ? 'none' : 'inline';"
Here is the fiddle.