I am using bootstrap panel to display data and there is a description field which i am displaying in panel body

I want to implement read more and read less link for description field in panel body

Here is what i have done until now

function readmore(data){


if (data.length > 100) {

    // truncate string
    datacut = data.substring( 0, 50);

    // make sure it ends in a word so assassinate doesn't bee ass...
    data2 = datacut + '<span id="restOfArticle" style="display:none">'+ data.substring( datacut.length, data.length);+'</span>'  ;
    return data2 + '<a onclick=showMoreOrLess(this,"restOfArticle") >..Read more</a>';
    }
    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";
    }
}

Read more and read less is working fine but its not right after the hidden content is finished but its in new div and when i click on the read more it collapses the panel body

Here is how i display the html data using jquery and webservice

<div class="panel-group" id="accordion">

<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4>

        <div class="pull-right">
            <button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i5" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse0" class="panel-collapse collapse">
        <div class="panel-body">
            <div><p>test<strong>&nbsp;description</strong></p>
            </div>
            <div>
                <button id="5" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
     id="panel1" aria-expanded="false">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4>

        <div class="pull-right">
            <button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i10" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
            <div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more patible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong>
                </p>
                <a onclick="showMoreOrLess(this,&quot;restOfArticle&quot;)">..Read more</a></div>
            <div>
                <button id="10" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>

What should i do to keep that body open and display the data

Thank you

I am using bootstrap panel to display data and there is a description field which i am displaying in panel body

I want to implement read more and read less link for description field in panel body

Here is what i have done until now

function readmore(data){


if (data.length > 100) {

    // truncate string
    datacut = data.substring( 0, 50);

    // make sure it ends in a word so assassinate doesn't bee ass...
    data2 = datacut + '<span id="restOfArticle" style="display:none">'+ data.substring( datacut.length, data.length);+'</span>'  ;
    return data2 + '<a onclick=showMoreOrLess(this,"restOfArticle") >..Read more</a>';
    }
    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";
    }
}

Read more and read less is working fine but its not right after the hidden content is finished but its in new div and when i click on the read more it collapses the panel body

Here is how i display the html data using jquery and webservice

<div class="panel-group" id="accordion">

<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4>

        <div class="pull-right">
            <button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i5" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse0" class="panel-collapse collapse">
        <div class="panel-body">
            <div><p>test<strong>&nbsp;description</strong></p>
            </div>
            <div>
                <button id="5" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
     id="panel1" aria-expanded="false">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4>

        <div class="pull-right">
            <button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i10" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
            <div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more patible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong>
                </p>
                <a onclick="showMoreOrLess(this,&quot;restOfArticle&quot;)">..Read more</a></div>
            <div>
                <button id="10" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>

What should i do to keep that body open and display the data

Thank you

• javascript
• jquery
• css
• twitter-bootstrap

Share Follow edited Oct 8, 2015 at 1:55 Mike Ross asked Oct 8, 2015 at 1:11 Mike RossMike Ross 2,97255 gold badges5252 silver badges107107 bronze badges 1

• Please include your HTML markup also. – user1012181 Commented Oct 8, 2015 at 1:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I'll provide a simple solution that you can adapt. Check this code one: http://jsfiddle/c7pcu5gy/