Second read more section not being rendered in second tab on page

[andrewjlow]

I am working on a Drupal bootstrap site. I would like to use readmore on two tabs on the following page:

https://scotch.devod.co/causes/building-fund

I have set up two "Read More" section. One on the first tab "KEON-COHEN DINING HALL" and the second on the "SPENCER CENTRE FOR DESIGN AND TECHNOLOGY".

Shortcodes are used to generate the tabs are from the creator of the theme I am using.

The first "Read More" is rendered correctly on the first tab, however the "Read More" is not rendered at all when I select the second tab.

My jQuery ready function is set as follows:

jQuery(document).ready(function( $ ) {
        $('div.extended-text').readmore({
                collapsedHeight: 0,
                lessLink: '<div class="read-more"><a href="#">Read Less</a></div>',
                moreLink: '<div class="read-more"><a href="#">Read More</a></div>'
        });

        $('div.extended-text_01').readmore({
                collapsedHeight: 0,
                lessLink: '<div class="read-more"><a href="#">Read Less</a></div>',
                moreLink: '<div class="read-more"><a href="#">Read More</a></div>'
        });
});

Would anyone know how I may resolve this and have the "Read More" section rendered for the second tab?

Thank you for your assistance in this matter.

[andrewjlow]

Actually realised that my issue is related to an issue that was closed:

#128

As suggested in that closed issue, I had to do something like this:

   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

   	$('div.extended-text').readmore({
   		collapsedHeight: 0,
   		lessLink: '<div class="read-more"><a href="#">Read Less</a></div>',
   		moreLink: '<div class="read-more"><a href="#">Read More</a></div>'  
   	});

       $('div.extended-text_01').readmore({
               collapsedHeight: 0,
               lessLink: '<div class="read-more"><a href="#">Read Less</a></div>',
               moreLink: '<div class="read-more"><a href="#">Read More</a></div>'
       });
   });