How to make jQuery slideToggle div area adjust to the height of the contents contained therein upon opening the div?

Question

On the front-end of the site, when I click on "Join the Conversation!" the slider does not open to the full length of the iframe contents (a published page dedicated to comments). I can't figure out why it only opens about 100px in height.

Q. What code can I affix to the jQuery code (shown above) to resize the height of the toggle contents area according to the constantly changing height of the comments that are contained therein?

Q. Or, do I need to change something in my toggle div block of code (shown above)?

If my approach here is the wrong approach, then I'm all ears.

The jQuery code:

jQuery(document).ready(function () {
jQuery(".toggle-hide").click(function () {
    jQuery(".toggle-effect").slideToggle("medium");
});
});

The toggle and content therein:

<div style="background-color: #000000; width: 100%;">

    <div class="toggle-hide" style="position: relative; font-size: initial; color: white; font-weight: 700; background-color: #ccc; width: 91.1%; margin-left: 4.5%; margin-right: -4.5%; margin-top: -2.4%; border-top-right-radius: 4px;">Join the Conversation!</div>

</div>

    <div class="toggle-effect" style="display: none;">

        <div style="position: relative; width: 100%; height: 800px; float: left; top: -2%; z-index: 1; background: #fff;">

          <iframe src="./blog-comments" width="100%" height="800"> </iframe>

        </div>

    </div>

Edit: I own the site in the iframe, it's the comments section and I'm not using any third party comments plugins to run the comments, either.

Answer 1

Update

• Added dynamic width adjustment

• Added hide/show of iframe

Using localStorage* to adjust iFrame width and height by its content

*For the sake of brevity sessionStorage is not included in this topic.

Note: This applies to all pages meeting the requirements of Same Origin Policy.

The Web Storage API has its own Event Object called Storage which will trigger whenever the localStorage is used. Although Event.currentTarget is Window, an important detail to remember is that the event handler must be on another page. So if some data from inside of an iframe was stored there, we can listen and handle the storage event from its parent page.

On the parent page index.html:

1. An ADD and DEL button, when clicked, will add/delete a div.box inside section#dock which is in the page iframe.html which is also the child page within the iframe.

2. ON/OFF button shows/hides iframe.

On the child page iframe.html:

3. Upon each click of button#add, the div.boxes will stack and increase the height of its parentElement (section#dock).

4. There's also an event handler set up that reaches up through the iframe into the parent page and listens for clicks on form#ui. When the user clicks any button on form#ui, in addition to steps #1 and #2, another callback is invoked on the child page:

   • The width and height of section#dock is stored in localStorage, which in turn triggers the storage event and callback on the parent page is invoked.

   • It gets the width and height of section#dock stored in localStorage...

   • ...displays the value in output#viewW and output#viewH...
   • ...changes iframe#frame width and height to the values

---

Details commented in Demo

Due to SO sandbox, localStorage doesn't work and iframes are severely limited. So, if you want to see a working Demo, see this Plunker

Note: The feature to add and delete iframe content is for demonstration simulating the changing dimensions of the comment boxes (width does not change in demo, but code is capable of adapting to width as well). If applied to OP, the slideToggle() button is sufficient to trigger the code that dynamically adjusts iframe dimensions.

Plunker

Demo

localstorage.js

function getData(key) {
  return JSON.parse(localStorage.getItem(key));
}

function setData(key, val) {
  localStorage.setItem(key, JSON.stringify(val));
}

---

style.css

#main {
  height: 100vh;
  width: 100vw;
}

#ui {
  padding: 5px 0;
  display: table;
}

fieldset {
  display: table-row;
  border: 10px ridge #777;
  border-radius: 12px;
}

#frame {
  display: block;
  border: 10px ridge #555;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

#dock {
  counter-reset: count;
  overflow-x: hidden;
}

.box {
  width:90%;
  min-width: 300px;
  height: 64px;
  border: 10px ridge #444;
  border-radius: 12px;
  text-align: center;
  counter-increment: count;
}

.box::before {
  content: 'Comment 'counter(count);
  display: block;
  margin-top: 16px;
  font-size: 24px;
}

section div.box:first-of-type {
  margin-top: 0;
}

section div.box:last-of-type {
  margin-bottom: 30px;
}

button,
label {
  font: inherit;
  display: table-cell;
}
label {
  padding-bottom: 10px;
}

legend {
  margin-bottom:-15px;
}

hr {
  margin-top: -2px;
  border-color: red;
}

---

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href='style.css' rel='stylesheet'>
  <script>
    /* Global variables */
    var HT, WD;
    // Reference the form
    var UI = document.forms['ui'];
  </script>
</head>

<body>

  <form id='ui'>
    <fieldset>
      <legend><h1>iFrame</h1></legend>
      <label for='viewW'><b>Width:&nbsp;
      <output id='viewW'></output>px</b>
      </label>
      <label for='viewH'><b>&nbsp;&nbsp;Height:&nbsp;
      <output id='viewH'></output>px</b>
      </label>
      <button id='add' type='button'>ADD</button>
      <button id='del' type='button'>DEL</button>
      <button id='onOff' type='button'>ON/OFF</button>
    </fieldset>
  </form>

  <iframe id='frame' src='iframe.html'></iframe>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='localstorage.js'></script>
  <script>
    $(function() {
      // When user clicks a button...
      $('#ui button').on('click', function() {
        // ...if button#add...
        if ($(this).is('#add')) {
          // ...make a div.box in section#dock...
          $('#frame').contents().find('#dock').append("<div class='box'>&nbsp;</div>");
          // or if button#onOff...
        } else if ($(this).is('#onOff')) {
          // ...slide iframe#frame in/out...
          $('#frame').slideToggle('slow');
          // ...Otherwise...
        } else {
          // ...remove a div.box
          $('#frame').contents().find('#dock div:last-child').remove();
        }
      });
      /* When the child page saves the height in
      || localStorage...
      */
      $(window).on('storage', function(e) {
        // ...get the values stored in localStorage...
        HT = getData('height');
        WD = getData('width');
        // ...display it ...
        $('#viewH').val(HT);
        $('#viewW').val(WD);
        // ...and set the values as `iframe#frame` dim
        $('#frame').height(HT);
        $('#frame').width(WD);
      });
    });
  </script>

</body>

</html>

---

iframe.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href='style.css' rel='stylesheet'>
  <script>
  /* Global variables */
    var HT, WD;
    // Reference the parent's form
    var UI = parent.document.forms['ui'];
  </script>
</head>

<body>
  <main id='main'>
    <section id='dock'>

    </section>
    <hr>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='localstorage.js'></script>
  <script>
    $(function() {
        // When the form is clicked...
        $(UI).on('click', function() {
          // Get the dimensions of #dock
          WD = $('#dock').width();
          HT = $('#dock').height();
          // Store the dim in localStorage
          setData('width', WD);
          setData('height', HT);
        });
    });
  </script>
</body>

</html>

---

References

• Web Storage API

• .contents() jQuery Method