Поместите кнопку и ее div одной командой

Question

В настоящее время у меня есть класс button, который позволяет мне размещать нажимаемую кнопку внутри предложения, и класс div, который позволяет мне добавлять содержимое к кнопке, которую я поместил в конце абзаца, содержащего предложение.

Это пример того, как я их использую

Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?

Когда этот текст отображается на странице, два предложения помещаются в два разных абзаца, поэтому объект divмежду ними.

Вот фрагмент кода css и javascript.

( function() {
    coll = document.getElementsByClassName("col");
    conn = document.getElementsByClassName("con");
    var i;
    for (i = 0; i < coll.length; i++) {
        coll[i].setAttribute('data-id', 'con' + i);
        conn[i].setAttribute('id', 'con' + i);
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = document.getElementById(this.getAttribute('data-id'));
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
} )();

.col {
  cursor: help;
  border-radius: 0;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font-size: 1em;
  color: red;
}

.con {
  padding: 0 1em;
  max-height: 0;
  overflow: hidden;
  transition: .3s ease;
  background-color: yellow;
}

Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?

Интересно, возможно ли реализовать ярлык для размещения двух объектов одной командой, то есть для получения предыдущего примера с использованием чего-либовот так

Try to click [[THIS|nice!]] and see what happens.
Did you try?

Я имею в виду, что команда [[THIS|nice!]] должна поместить объект <button class="col">THIS</button> в ту же позицию, а объект <div class="con">nice!</div> в конце абзаца, содержащего команду.

Возможно ли реализовать такую ​​команду (или аналогичную)?

EDIT

Я забыл сказать, что содержимое кнопки, то есть то, что написано внутри divТакже должно быть возможно использование шорткода WordPress, который является ярлыком / макросом для более длинного фрагмента кода или текста.

Answer 1

Используя jQuery, closest() найдите ближайший элемент <p> и добавьте <div class="con">nice!</div> после элемента <p>. Для переключения вы можете использовать класс active и добавлять или удалять .con элемент.

$('.col').click(function(){
    let traget = $(this).closest('p');
    if(traget.hasClass('active')) {
       traget.removeClass('active');
       traget.next('.con').remove();
    } else {
       traget.addClass('active');
       traget.after(`<div class="con">${$(this).data('message')}</div>`);   
    } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try to click <button class="col" data-message="Hello">THIS</button> and see what happens.</p>
<p>Did you try?</p>

Answer 2

Обычно вы не используете div для ввода текста. Вы используете его для определения областей или групповых элементов. Вы можете получить то, что вы просите, в одном предложении, например:

html

<h1> some random text <a class="btnID">button</> some more text<h1>

css

   .btnID {
    color: red;
    }