Свернуть (развернуть) фрейм

Question

Как можно сделать фрейм на html странице, чтобы можно было ссылкой его развернуть и свернуть?

Answer 1

Вариант JavaScript:

document.getElementById('button').addEventListener('click', function() {
  const iframe = document.getElementById('iframe');
  const button = document.getElementById('button');
  iframe.classList.toggle('hide');
  button.innerHTML == 'Спрятать' ? button.innerHTML = 'Показать' : button.innerHTML = 'Спрятать';
});

#iframe {border: 2px solid red; transition: all 0.3s;}
.hide {height: 0; transition: all 0.3s;}

<button id="button">Спрятать</button><br><br>
<iframe id="iframe" src="https://www.culture.ru/" width="600" height="600"></iframe>

Answer 2

Вот вам готовое решение на jQuery

$('.acc_head').on('click',function(){
    $(this).siblings('.acc_body').slideToggle();
})

.acc_head{
    background:#444;
    padding:10px;
    color:#fff;
}
.acc_body{
    background:#ddd;
    padding:20px;
    color:#444;
    height:200px;
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
    <div class="acc_head">Нажми меня</div>
    <div class="acc_body">Та-дам! Содержимое!</div>
</div>
<div class="wrap">
    <div class="acc_head">Нажми меня</div>
    <div class="acc_body">Та-дам! Содержимое!</div>
</div>
<div class="wrap">
    <div class="acc_head">Нажми меня</div>
    <div class="acc_body">Та-дам! Содержимое!</div>
</div>

БЛОГ НА HUSL

Свернуть (развернуть) фрейм

Ответы (2 шт):