alexgrenn, внимательно изучите код ... вам нужно только правильно расставить классы и дата-атрибут и добавить в css новый класс.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.dress, div.shoes {
display: none;
}
div.show {
display: block;
}
</style>
</head>
<body>
<a href="#" class="open" data-cls="dress">Зеленое платье</a>
<div class="dress" ><img>Зеленое платье</div>
<a href="#" class="open" data-cls="dress">Красное платье</a>
<div class="dress" ><img>Красное платье</div>
<a href="#" class="open" data-cls="shoes">Зеленые туфли</a>
<div class="shoes" ><img>Зеленые туфли</div>
<a href="#" class="open" data-cls="shoes">Красные туфли</a>
<div class="shoes" ><img>Красные туфли</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var open = document.querySelectorAll(".open"),
obj = {};
[].forEach.call(open, function(a) {
var cls = a.dataset.cls;
obj[cls] !== undefined ? obj[cls]++ : obj[cls] = 0;
var i = obj[cls];
cls = document.querySelectorAll("div." + cls);
a.addEventListener("click", function(event) {
event.preventDefault();
[].forEach.call(cls, function(div, k) {
div.classList[k == i ? "toggle" : "remove"]("show")
})
})
})
});
</script>
</body>
</html>
