скрипт именно это и делает

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

<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<div>
 <input id="ac-1" name="accordion-1" type="checkbox" />
  <label for="ac-1">аккордеон1</label>
   <article class="ac-small">
     <ul class="list1">
       <li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
       <li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
     </ul>
   </article>
  </div>					
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container2"><!--аккордион2-->
<div>
 <input id="ac-2" name="accordion-1" type="checkbox" />
  <label for="ac-2">аккордеон2</label>
   <article class="ac-small">
     <ul class="list2">
       <li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
       <li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
     </ul>
   </article>
  </div>					
</section>

//a . 
$(function() {
    var arrText = [];
    $(".list1").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list1 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom1").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});

// b 
$(function() {
    var arrText = [];
    $(".list2").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list2 li").css("border-color", "white");
            $(this).css("border-color", "#000");// Устанавливаем красную рамку у выбранной картинки
      $('.bottom1').css('background','url('+img_path+') repeat'); // Меняем фон страницы   
      arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})   // пишем название 
	});            
});

нет, не делает, у меня надписи заменяются.

С каждого аккордеона, должно появиться в итоге по одной надписи, а получается что в пределах 1го аккордиона надписи меняются, а выбираешь во втором, то надпись из 2го заменяет надпись из 1го, а надо ,что б надпись "добавилась" снизу и было уже 2 надписи (1й и 2й аккодеоны) и так с третим и 4м.

olmensk,
а зачем вы 2 скрипта вместо одного сделали????

olmensk,
достаточно $(".list1, .list2"). или $(".ac-small") или $("ul")
перед циклом .each

заработало ))

Скажите пожалуйста ещё одно, последнее, вот у меня есть ещё один блок, как сделать подобное, что б в один блокнот записалось но с 3х аккордионов, НО 1и2 окрашивают bottom1, а 3й аккоридон окрашивает bottom2?

Просто если вставляю перед each ещё и list3, тогда аккордион закрашивает не тот div
а когда отдельно вставляю скрипт, то надпись из аккордионов 1и2 заменяется надписью из аккордиона3

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

<div class="bottom2"></div><!--блок2 который будет закрашен выбранной картинкой из акордеона 3-->

<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<div>
 <input id="ac-1" name="accordion-1" type="checkbox" />
  <label for="ac-1">аккордеон1</label>
   <article class="ac-small">
     <ul class="list1">
       <li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
       <li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
     </ul>
   </article>
  </div>					
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container2"><!--аккордион2-->
<div>
 <input id="ac-2" name="accordion-1" type="checkbox" />
  <label for="ac-2">аккордеон2</label>
   <article class="ac-small">
     <ul class="list2">
       <li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
       <li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
     </ul>
   </article>
  </div>					
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container3"><!--аккордион3-->
<div>
 <input id="ac-3" name="accordion-1" type="checkbox" />
  <label for="ac-3">аккордеон2</label>
   <article class="ac-small">
     <ul class="list3">
       <li path-img="images/c1.jpg"><img src="images/c1.jpg" data-title="надпись c1"></li>
       <li path-img="images/c2.jpg"><img src="images/c2.jpg" data-title="надпись c2"></li>
     </ul>
   </article>
  </div>					
</section>

$(function() {
    var arrText = [];
    $(".list1, .list2").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list1 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom1").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});

Это последнее, честное слово )

olmensk,

$(function() {
    var arrText = [];
    $(".list1, .list2, .list3").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $("li", ul).css("border-color", "white");    
            $(this).css("border-color", "#000");
            $(".bottom" + (indx == 2? 2 : 1)).css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});

РОНИ, ты мегакрут! Огромнейшее спасибо от души! )))

Извини, извини, но.. почему-то только заметил цвет у блока не меняется (( . Надписи записываются как надо, а цвета не меняются ((
Что я не так делаю? (( непонимаю...

Вот эту надпись убираешь + (indx == 2? 2 : 1) и цвета меняются, но 3й аккордеон заливает цветом первый div и текст не вносится, а надпись оставляшь, текст вносится но цвета вообще не реагируют не в первом ни во втором ни в третем акордеоне.. (((