jquery - Readmore.js not working inside Bootstrap 3 Modal -

jquery - Readmore.js not working inside Bootstrap 3 Modal -

i using readmore.js in page hide content. working fine everywhere except not working within bootstrap modal.

here illustration fiddle

you see there text show more link. when click on show more shows more text hidden. same thing did within modal(click modal button) it's not working there. hope added correctly not getting why not coming within modal. how can create work within modal.

i need readmore.js utilize badly too. help save me.

js

$('.show-more').readmore({ maxheight: 112, speed: 300, morelink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">show more</a>', lesslink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">show less</a>' });

you utilize show , shown bootstrap3 events, e.g:

var opts = { maxheight: 112, speed: 300, morelink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">show more</a>', lesslink: '<a href="#" class="btn btn-link" style="display: block; width: auto; padding: 0px;text-align: left; margin-top: 10px;">show less</a>' }; $('.show-more').readmore(opts); $('.modal').one('show.bs.modal', function () { //for styling purpose $(this).find('.show-more').css({overflow: "hidden", maxheight: opts.maxheight}); }).one('shown.bs.modal', function () { //initialize plugin 1 time modal shown $(this).find('.show-more').readmore(opts); });

you need initialize plugin 1 time modal opened first time.

-demo jsfiddle-

jquery css twitter-bootstrap-3