Applying readmore.js functionality inside a tab content

Question

Please help. I was not able to trigger .readmore() function using the readmore.js jquery plugin inside a tab'd page, while it runs good on the first tab'd page, but not on the tabs those are inactive. Here is my issue. I have a page with 4 tabs and each tab has its own content. I read about this readmore.js that trims long text with having an option to expand it to readmore. Below is the jsp snippet -

    <div class="tabbable">
        <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
            <li class="active project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#details">Project Details</a>
            </li>

            <li class=" project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#tab1">Tab 1</a>
            </li>

            <li class=" project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#tab2">Alpha</a>
            </li>

        </ul>

        <div class="tab-content">
            <div id="details" class="tab-pane in active">

            <article> long text here..... </article>

            </div>

            <div id="tab1" class="tab-pane">

            <article> another long text here..... </article>

            </div>

            <div id="tab2" class="tab-pane">

            <article> another long text here..... </article>

            </div>

        </div> <!-- tab-content div ends here.. -->

        </div> <!-- tabbable div ends here.. -->

        <script src="../assets/js/jquery-2.0.3.min.js"></script>
        <script src="../assets/js/readmore.min.js"></script>

        <script type="text/javascript">


        jQuery(function($) {

        $('article').readmore({maxHeight: 100}); // This function applies good for the first tab, but when navigated to the next tab, the text is not trimmed..

        });

        </script>

Appreciate your help and suggestions here.. I tried to apply this function by binding to the tab click event, but of no help. I have also associated this to the div click event, it works only when the user clicks on the div tab (content inside the tab), which is not as expected.

Please help...

Answer 1

I was able to make it work using the following code:

$(function() {
    $(document).on( 'shown.bs.tab', 'a[data-toggle=\'tab\']', function (e) {
           $('.article').readmore({
                moreLink: '<a href="#">Expand</a>',
                maxHeight: 100
            });
        })
});

Answer 2

I made it work with this code. Putting a "readmore" function before "tab"

<script type="text/javascript">
    jQuery(document).ready(function($){
       $('.article').readmore();
       $('#tabs').tabs();

    });
</script>