title: Jquery dom manipulation with knockout
body: <p>I would like to create a expandable/collapsable div based on content inside the div. Basically if the div's height is > 50px i would like to add a link to expand the div to read the content and then collapse it. </p>
  
  <p>I have a div that is bound using Knockout. I tried the following options and it didnt work:</p>
  
  <ol>
  <li>Used the jquery script in document.ready, it is not able to find the elements</li>
  <li>Used custom KO bindings with init and update. This does not work because my div's height comes back as 0 all the time.</li>
  </ol>
  
  <p>What is the best way to manipulate the final HTML after KO has completed its bindings.</p>
  
  <p>Please advise</p>
  
  <p>Here is my html</p>
  
  <pre><code>&lt;div data-bind="foreach: notes" class="coment_div"&gt;
      &lt;div class="mycontainer" data-bind="collapseUI:true"&gt;
          &lt;p class="date_custome" data-bind="text:formattedDate"&gt;&lt;/p&gt;
          &lt;p class="comment"&gt;
              &lt;span data-bind="text:comment"&gt;&lt;/span&gt;
          &lt;/p&gt;
          &lt;p class="read-more"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my jquery script</p>
  
  <pre><code>var slideHeight = 50;
  $(".myContainer").each(function() {
      var $this = $(element);
      var $wrap = $this.children(".comment");
      var defHeight = $wrap.height();
      if (defHeight &gt;= slideHeight) {
          var $readMore = $this.find(".read-more");
          $wrap.css("height", slideHeight + "px");
          $readMore.append("&lt;a href='#'&gt;Read More...&lt;/a&gt;");
          $readMore.children("a").bind("click", function(event) {
              var curHeight = $wrap.height();
              if (curHeight == slideHeight) {
                  $wrap.animate({
                      height: defHeight
                  }, "normal");
                  $(this).text("Collapse");
                  $wrap.children(".gradient").fadeOut();
              } else {
                  $wrap.animate({
                      height: slideHeight
                  }, "normal");
                  $(this).text("Read More...");
                  $wrap.children(".gradient").fadeIn();
              }
              return false;
          });
      }
  });
  </code></pre>