toggle content with different elements

Test for iPad

HTML

<div id="spanelement" class="additionalcnt">
    <div class="additionalinner">
        <p>It works like charm with a span-element</p>
    </div>
</div>

<div id="linkelement" class="additionalcnt">
    <div class="additionalinner">
        <p>It works like charm with a link-element</p>
    </div>
</div>

<div id="buttonelement" class="additionalcnt">
    <div class="additionalinner">
        <p>It works like charm with a button-element</p>
    </div>
</div>

CSS

body {padding: 20px 50px; color: #fff; font-size: 14px; font-family: Verdana, sans-serif; }
.additionalcnt {
width: auto;
min-width: 0px;
max-width: 300px;
max-height: 800px;
/*position: absolute;*/
/*right: 0;*/
/*top: 10px;*/
position: relative;
margin-bottom: 20px;
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("slow").toggleClass("open");
       event.preventDefault();
    });
});