Выпадающая сторонняя форма, связанная через iframe при нажатии на изображение

Question

В основном я пытаюсь найти самый простой способ настроить изображение таким образом, чтобы, когда пользователь щелкает изображение - сторонняя форма, которая в настоящее время связана в html, как iframe src = "" опускается ниже указанного изображения изатем сворачивается при повторном нажатии на изображение.Я пробовал разные варианты, используя jquery, но я не могу понять это.Я чувствую, что это должно быть просто сделать, но мне не повезло.Любые другие предложения, которые я видел, были связаны с миниатюрами YouTube и воспроизведением видео по клику, что на самом деле не то, что я хочу сделать.

Есть идеи, как мне это сделать?

Заранее спасибо!

Answer 1

Этот шаблон с ванильным JS соответствует вашим спецификациям.
Возможно, его можно усовершенствовать с помощью jQuery (например, я знаю, что jQuery имеет метод .toggle и метод .slideDown).

function toggleIframe(){
  const frame = document.getElementById("myIframe");
  if(frame.style.display != "block"){ frame.style.display = "block"; }
  else{ frame.style.display = "none"; }
}

#container{ position: relative; }
#myImg{ height: 100px; width: 300px; border: solid 1px gray; }
#myIframe{ height: 100px; width: 300px; border: solid 1px gray; display: none; }
#rest-of-page{ position: absolute; top: 100px; height: 200px; width: 500px; border: solid 1px gray; }

<div id="container">
  <div id="myImg" onclick="toggleIframe()">img</div>
  <div id="myIframe">iframe</div>
  <div id="rest-of-page"><br/><br/>rest of page</div>
</div>