свернуть окошко помощи (iframe)

у меня над темами - окошко помощи, ифрейм, в нём картинки ,
как бы сделать чтобы была кнопка скрытия/раскрытия? а по умолчанию раскрыто

Добрый вечер!

Правильно ли я понимаю, что блок iframe у Вас вставлен в шаблон viewtopic_body?
Если да, тогда:

ПА - Оформление - Шаблоны - Общие настройки - viewtopic_body

Найдите:

Код:

<iframe width="700" height="480" src="https://stihi-podval.forumotion.com/h1-page"></iframe>

После этого кода, вставьте этот:

Код:

<div class='btn_iframe'>Скрыть инструкцию</div>
<script>
 $(document).ready(function() {
     let iframe = $('iframe[src="https://stihi-podval.forumotion.com/h1-page"]');
     let btnIframe = $('.btn_iframe');
 
     btnIframe.click(function() {
        if (btnIframe.text() === 'Скрыть инструкцию') {
           btnIframe.text('Показать инструкцию');
           iframe.css("display", "none");
        } else if (btnIframe.text() === 'Показать инструкцию') {
           btnIframe.text('Скрыть инструкцию');
           iframe.css("display", "block");
        };
     });
  });
</script>


Сохранить. Опубликовать.

ПА - Оформление - Цвета & CSS - Каскадная таблица стилей CSS

Вставьте этот код:

Код:

.btn_iframe {
  width: 300px;
  height: 20px;
  background-color: #eee;
  border: 1px solid grey;
  font-weight: 700;
  font-size: 25px;
  text-align: center;
  margin: 20px auto;
  padding: 15px 0;
}

Сохранить.

Это просто стилизация кнопки.

Если хотите добавить эффект "запоминания", то есть пользователь один раз закроет инструкцию и просмотреть ее сможет только после нажатия на кнопку "Показать инструкцию", тогда в шаблоне viewtopic_body в место выше указанного кода вставьте этот код:

Код:

<div class='btn_iframe'>Скрыть инструкцию</div>
<script>
 
  $(document).ready(function() {
     let iframe = $('iframe[src="https://stihi-podval.forumotion.com/h1-page"]');
     let btnIframe = $('.btn_iframe');
 
     btnIframe.click(function() {
        if (btnIframe.text() === 'Скрыть инструкцию') {
           btnIframe.text('Показать инструкцию');
           iframe.css("display", "none");
           localStorage.setItem('btniframe','off');
        } else if (btnIframe.text() === 'Показать инструкцию') {
           btnIframe.text('Скрыть инструкцию');
           iframe.css("display", "block");
           localStorage.removeItem('btniframe');
        };
     });
 
     if (localStorage.getItem('btniframe') === 'off') {
        btnIframe.text('Показать инструкцию');
        iframe.css("display", "none");
     } else {
        localStorage.removeItem('btniframe');
     };
  });
 
</script>

Результат: