а почему блок bottom1 не закрашивается картинкой которую выбрал?
Назвние в bottom2 появляется, это то, что надо, но первый блок bottom1 не закрашивается в выбранную картинку почемуто... ((

olmensk,
здесь закрашивается? если да то посмотрите структуру ul и элементов в этом списке

ПО-МОЕМУ РАЗОБРАЛСЯ!!! ))))))))))

СПАСИБО!!! ВЫ ЧУДО !!!!!!!!!!! СПАСИТЕЛЬ МОЙ :)

ПОКАЗЫВАЮ:

<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->


<div id="mydiv3"><!--аккордеон в котором картинка которая будет красить блок-->
<ul class="list-bottom"> 
<li path-img="images/1.jpg"><img src="images/1.jpg"></li> <!--1-путь; 2-превью-->
<li path-img="images/2.jpg"><img src="images/2.jpg"></li> <!--1-путь; 2-превью-->
</ul> 
</div>

<!--скрипт окрашивания картинкой блока-->
	$(document).ready(function(){
    $('.bottom1 li').click(function () {      
      var img_path = $(this).attr("path-img"), title = $("img",this).data("title"); // Путь к изображению      
      $('.bottom1 li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#000"); // Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон bottom1  
	  $('.bottom2').html(title); // пишем название в bottom2  
    });            
});

olmensk,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Скажите пожалуйста ещё одну вещь,

если 2 - 3 аккордеона на одной странице, и в каждом выбрать по одному рисунку рандомно, то как сделать, что б в bottom2 написались отдельно каждая выбраная картинка,

ато получается названия самоменяются, например в 1м акордеоне выбрал картинку и появилось название "фигня1", во втором выбрал картинку и название "фигня1" заменилась на новое,

а как сделать, что б название из 1го аккордеона осталось, а со 2го акордеона название написалось рядом с названием из 1го акордеона, или с новой строки, и так с третьего тоже с новой и в bottom2 появлялиь назвния с каждого аккордеона.

Надеюсь понятно написал ^^))

olmensk,

$('.bottom2').html($('.bottom2').html() + "<br>"+ title);

То, что надо!!!
ОГРОМНОЕ СПАСИБО!! )))))))))))))))))

"..название из 1го аккордеона осталось, а со 2го акордеона название написалось рядом с названием из 1го акордеона c новой строки.."

<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->


<div id="mydiv3"><!--аккордеон в котором картинка которая будет красить блок-->
<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>

<!--скрипт окрашивания картинкой блока-->

	$(document).ready(function(){
    $('.bottom1 li').click(function () {      
      var img_path = $(this).attr("path-img"), title = $("img",this).data("title"); // Путь к изображению      
      $('.bottom1 li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#000"); // Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон bottom1  
	  $('.bottom2').html($('.bottom2').html() + "<br>"+ title);
 // пишем название в bottom2  
    });            
});

А можно ещё один, последний вопрос? ))) понимаю, что поднадоел, но сам не разберусь (( :)

Сейчас при каждом нажатии появляется название с новой строки, даже если 5раз нажать на одну и туже картинку, то её название 5 раз появитя друг за другом.

Как сделать, что б в bottom2 название каждой картинки появлялось 1раз из каждого аккордеона?

Тоесть обьясню.

1й аккордеон: например в нём 3 картинки и я нажал на 1-ю, появилось название 1й, потом нажал на вторую, и название с первой сменилось на 2ю. В итоге из первого аккордеона в bottom2 только одно название высветилось той картинки которую нажимал.

2й аккодеон: (В bottom2 уже есть название из аккрдеон1) и смысл такой же, какую б я картинку не клацал в аккордеон2 , то в bottom2 рядом с названием из 1го аккордеона, появлялось название из второго.

Тоесть смысл в том, что б из каждого аккордеона получилось по одному названию, а по отдельности если клацать в конкретном аккордеоне, то названия картинки самозаменялось.

..надеюсь понятно..

<div class="bottom1"></div><!--блок который будет закрашен выбранной картинкой из любого акордеона-->
<div class="bottom2"></div><!--блок в котором напишется название картинки которая закрасит блок bottom1-->

<div id="mydiv3"><!--аккордеон1 в котором картинка которая будет красить блок bottom1-->
<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 в котором картинка которая будет красить блок bottom1-->
<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>

<!--скрипт окрашивания картинкой блока-->

$(document).ready(function(){
    $('.bottom1 li').click(function () {      
      var img_path = $(this).attr("path-img"), title = $("img",this).data("title"); // Путь к изображению      
      $('.bottom1 li').css("border-color","white"); // Сбрасываем у тегов li рамку, ставим цвет белый
      $(this).css("border-color","#000"); // Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон bottom1  
	  $('.bottom2').html($('.bottom2').html() + "<br>"+ title); // пишем название в bottom2  
    });            
});

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>

Не получилось!
Надписи самозаменяются везде. !

В пределах одного аккордиона надписи самозаменяются, это ок,

но когда клацаю на превьюшку 2го аккордеона, то надпись из 1го аккордиона заменяется на надпись из 2го аккордиона.
...такоеже и с третим аккордионом, его надпись заменяется на надпись из предыдущих 2х...

а по отдельности, в контексте одного аккордиона, всё как надо.

Теперь бы сделать как-то так, что б из 1го аккор. надпись осталась когда клацаешь на 2й.

Пытался, пытался, у меня не получается такое, помогите.