title: Read More in bootstrap panel using javascript
body: <p>I am using bootstrap panel to display data and there is a <code>description</code> field which i am displaying in panel body</p>
  
  <p>I want to implement <code>read more</code> and <code>read less</code> link for <code>description</code> field in panel body</p>
  
  <p>Here is what i have done until now</p>
  
  <pre><code>function readmore(data){
  
  
  if (data.length &gt; 100) {
  
      // truncate string
      datacut = data.substring( 0, 50);
  
      // make sure it ends in a word so assassinate doesn't become ass...
      data2 = datacut + '&lt;span id="restOfArticle" style="display:none"&gt;'+ data.substring( datacut.length, data.length);+'&lt;/span&gt;'  ;
      return data2 + '&lt;a onclick=showMoreOrLess(this,"restOfArticle") &gt;..Read more&lt;/a&gt;';
      }
      return data;
  }
  
  function showMoreOrLess(thisObj,bonusContent){
    var caption = thisObj.innerHTML;
    //alert(caption);
      if ( caption == "..Read more" ) {
        document.getElementById(bonusContent).style.display = "inline";
        thisObj.innerHTML = "..Read less";
      } else {
        document.getElementById(bonusContent).style.display = "none";
        thisObj.innerHTML = "..Read more";
      }
  }
  </code></pre>
  
  <p>Read more and read less is working fine but its not right after the hidden content is finished but its in new <code>div</code> and when i click on the read more it collapses the panel body </p>
  
  <p>Here is how i display the html data using jquery and webservice</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
  
  &lt;div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0"&gt;
      &lt;div id="event-title" class="panel-heading event-heading"&gt;&lt;h4 class="panel-title"&gt;test&lt;/h4&gt;
  
          &lt;div class="pull-right"&gt;
              &lt;button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"&gt;&lt;i
                      id="i5" class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Check in
              &lt;/button&gt;
              &lt;span class="label label-default badge-round pull-right label-checkin"&gt;1 &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapse0" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div&gt;&lt;p&gt;test&lt;strong&gt;&amp;nbsp;description&lt;/strong&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button id="5" data-toggle="modal" data-target="#myModal" type="button"
                          class="btn btn-danger btn-sm location-btn center-block"&gt;&lt;span
                          class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;00 Piter Street, New South Wales,
                      Australia
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
       id="panel1" aria-expanded="false"&gt;
      &lt;div id="event-title" class="panel-heading event-heading"&gt;&lt;h4 class="panel-title"&gt;show jumping test 1&lt;/h4&gt;
  
          &lt;div class="pull-right"&gt;
              &lt;button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"&gt;&lt;i
                      id="i10" class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Check in
              &lt;/button&gt;
              &lt;span class="label label-default badge-round pull-right label-checkin"&gt;1 &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div&gt;&lt;p&gt;&lt;strong&gt;This is a very long description written&lt;span id="restOfArticle" style="display:none"&gt; just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks&lt;/span&gt;&lt;/strong&gt;
                  &lt;/p&gt;
                  &lt;a onclick="showMoreOrLess(this,&amp;quot;restOfArticle&amp;quot;)"&gt;..Read more&lt;/a&gt;&lt;/div&gt;
              &lt;div&gt;
                  &lt;button id="10" data-toggle="modal" data-target="#myModal" type="button"
                          class="btn btn-danger btn-sm location-btn center-block"&gt;&lt;span
                          class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;500 Piter Street, New South Wales,
                      Australia
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What should i do to keep that body open and display the data</p>
  
  <p>Thank you</p>