olmensk,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bottom1{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
}
.bottom2{
background-color: #FF00FF;
color: #FFFF00;
}
.active {
border: 1px solid #FF0000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var arrText = [];
$(".list-bottom").each(function(indx, ul) {
arrText[indx] = "";
$("li", ul).click(function() {
var img_path = $(this).attr("path-img"),
title = $("img", this).data("title");
$(".bottom1 li").css("border-color", "white");
$(this).css("border-color", "#000");
$(".bottom1").css("background", "url(" + img_path + ") repeat");
arrText[indx] = title;
$(".bottom2").html(arrText.join("<br>"))
})
})
});
</script>
</head>
<body>
<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой из любого акордеона-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->
<div id="mydiv3"><!--аккордеон1 в котором картинка которая будет красить блок-->
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv3"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv3"></li> <!--1-путь; 2-превью-->
</ul>
</div>
<div id="mydiv4"><!--аккордеон2 в котором картинка которая будет красить блок-->
<ul class="list-bottom">
<li path-img="images/1.jpg"><img src="images/1.jpg" data-title="текст1 mydiv4"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg" data-title="текст2 mydiv4"></li> <!--1-путь; 2-превью-->
</ul>
</div>
</body>
</html>