toggle content with different elements above images

Test for iPad

by Jens Grochtdreis

HTML

<div class="imgcnt">
    <img src="http://lorempixel.com/400/200" alt="" />
    <div id="spanelement" class="additionalcnt">
        <div class="additionalinner">
                <p>It works like charm with a span-element</p>
        </div>
    </div>
</div>

<div class="imgcnt">
    <img src="http://flickholdr.com/400/200" alt="" />
    <div id="linkelement" class="additionalcnt">
        <div class="additionalinner">
            <p>It works like charm with a link-element</p>
        </div>
    </div>
</div>

<div class="imgcnt">
    <img src="http://placekitten.com/400/200" alt="" />
    <div id="buttonelement" class="additionalcnt">
        <div class="additionalinner">
            <p>It works like charm with a button-element</p>
        </div>
    </div>
</div>

CSS

body {padding: 20px 50px; color: #fff; font-size: 14px; font-family: Verdana, sans-serif; }
.imgcnt {position: relative;margin-bottom: 20px; width: 400px;}
img {display: block;}

.additionalcnt {
width: auto;

position: absolute;
right: 0;
top: 10px;
background-color: #a20000;
padding: 20px 2px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.additionalinner.open {
padding: 5px 20px;
display: block;
margin-right: 1px;
}

.additionalcnt button,
.additionalcnt a,
.additionalcnt span {
position: absolute;
border: none;
padding: 0 5px 0 10px;
background-color: #a20000;
font-family: "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size: 30px;
font-weight: bold;
color: #fff;
cursor: pointer;
left: -25px;
top: 3px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.additionalcnt button.open {
top: 20px;
}

JavaScript

// container with additional infos
$("#spanelement").append("<span>i</span>"); 
$("#linkelement").append("<a>i</a>"); 
$("#buttonelement").append("<button>i</button>"); 
$(".additionalinner").hide();


$(".additionalcnt button, .additionalcnt a, .additionalcnt span").each(function(index) {
  $(this).on("click touch", function(event) {
        $(this).toggleClass("open");
        $(this).siblings("div.additionalinner").slideToggle("fast").toggleClass("open");
       event.preventDefault();
    });
});