Javascript-форум - клик по ссылке и открытие блока

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - клик по ссылке и открытие блока (https://javascript.ru/forum/misc/59683-klik-po-ssylke-i-otkrytie-bloka.html)

клик по ссылке и открытие блока

Всем привет. Пожалуйста подскажите как сделать так чтобы при нажатии на ссылку открывалось содержимое того дива на котором нажали - а то всё время открывается первый блок - при условии что таких дивов бывает разное количество.

<div class="bbCodeBlock"><div class="bbCodeName">имя 1</div><div class="codeMessage">содержимое 1</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 2</div><div class="codeMessage">содержимое 2</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 3</div><div class="codeMessage">содержимое 3</div></div>

<script type="text/javascript">
function page() {
var view = window.open("","view");
var code = document.querySelector('.codeMessage');
view.document.open();
view.document.write(code.innerText);
view.document.close();}
$('.bbCodeName').html('<a href="javascript:void(0)" onclick="page()">ОТКРЫТЬ</a>');
</script>

Спасибо

BARABANTEMO,

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            border: 1px solid black;
        }

        div.bbCodeName {
            cursor: pointer;
        }
    </style>
    <title>Document</title>
</head>
<body>

<div class="bbCodeBlock">
    <div class="bbCodeName">имя 1</div><div class="codeMessage">содержимое 1</div></div>
<br>
<div class="bbCodeBlock">
    <div class="bbCodeName">имя 2</div><div class="codeMessage">содержимое 2</div>
</div>
<br>
<div class="bbCodeBlock">
    <div class="bbCodeName">имя 3</div><div class="codeMessage">содержимое 3</div>
</div>

<script>
    var names =  document.getElementsByClassName('bbCodeBlock');

    for (var i = 0; i < names.length; i++) {
        var el = names[i];
        el.addEventListener('click', function () {
            var codeMessage= this.getElementsByClassName('codeMessage')[0];

            codeMessage.style.display = (codeMessage.style.display == 'none')?'block':'none';

        })
    }
</script>


</body>
</html>

BARABANTEMO,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    var s = $(".bbCodeBlock");
    s.each(function(indx, el) {
            var text = $(".codeMessage", el).text();
        $(".bbCodeName", el).click(function() {
            var view = window.open("", "view");
            view.document.open();
            view.document.write(text);
            view.document.head.innerHTML = "<title>сайт</title>";
            view.document.close()

        }).text("ОТКРЫТЬ")
    })
});

  </script>
</head>

<body>
<div class="bbCodeBlock"><div class="bbCodeName">имя 1</div><div class="codeMessage">содержимое 1</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 2</div><div class="codeMessage">содержимое 2</div></div>
<br>
<div class="bbCodeBlock"><div class="bbCodeName">имя 3</div><div class="codeMessage">содержимое 3</div></div>

</body>

</html>

рони, большое спасибо всё работает а Mess4me наверно не понял мой вопрос но всё равно спасибо

BARABANTEMO,
немного изменил смотрите код снова пост 3

рони, да посмотрел я конечно не понимаю в чём разница но буду пользоваться последним кодом - и ещё вопрос а как сделать чтобы в новом окне содержимое дива записывалось в body а в head например <title>сайт</title> спасибо и извините за беспокойство

BARABANTEMO,
выше снова

рони, да всё в десятку ещё раз большое спасибо в долгу у ВАС