Как вставить содержимое внутри кнопки фильтра без дублирования

Question

Есть ли способ вставить содержимое в кнопку фильтра, не дублируя его?

Например, если вы видите, что содержимое в этом случае «Hello world» дублируется внутри кнопки свертывания фильтра.

Идея состоит в том, чтобы показывать контент без кнопки фильтра на больших и средних устройствах и сворачивать на маленьких устройствах, чтобы пользователь мог свернуть контент при необходимости. Это сохранит длину страницы и даст хороший UX / UI.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-6">
    Hello world
  </div>
  <div class="col-6">
  <hr>
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sidebar-collapse">Filter</button>
    <div id="sidebar-collapse" class="collapse filter-collapse">
    Hello world
    </div>
  </div>
</div>

Answer 1

Это надуманный пример, но вы можете сохранить переменную с текстом и использовать window.matchMedia, чтобы проверить размеры устройства и динамически добавить или удалить этот текст. Что-то вроде:

function addText(query) {
  const text = document.createTextNode("Hello world");
  if (query.matches) {
    document.body.style.backgroundColor = "yellow";
    sidebar.appendChild(text);
    desktop.innerText = '';
  } else {
    document.body.style.backgroundColor = "pink";
    desktop.appendChild(text);
    sidebar.innerText = '';
  }
}
const desktop = document.getElementById('desktop-div');
const sidebar = document.getElementById('sidebar-collapse');
const query = window.matchMedia("(max-width: 350px)");
addText(query);
query.addListener(addText);

Вот обновленный JSFiddle.

Но я считаю, что проще просто сохранить дубликат текста и скрыть или показать его в зависимости от устройства, использующего CSS медиазапросы.