Question

This is my HTML

<div id="page-wrap">
  <div id="tab">
    <ul class="nav">
      <li class="nav-one"><a href="#tab1" class="current">Featured</a></li>
      <li class="nav-two"><a href="#tab2">Core</a></li>
      <li class="nav-three"><a href="#tab3">jQuery</a></li>
      <li class="nav-four last"><a href="#tab4">Classics</a></li>
    </ul>
    <div class="list-wrap">
      <div id="tab1">
        <div class="readmore">Nam tincidunt tempus justo sed aliquam. Sed rhoncus, augue at hendrerit semper, lectus leo varius ndivla, sit amet laoreet sem quam in ipsum. Aenean eget nunc a arcu ornare consequat. Mauris arcu elit, dictum sed aliquet sed, blandit vel arcu. Aliquam id ligdiva justo. Donec et magna id risus hendrerit mattis vitae sed leo. Donec molestie condimentum venenatis. In imperdiet, diam vel vehicdiva fringilla, dolor massa condimentum dolor, ac consequat dui augue sit amet ndivla. Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere cubilia Curae; Ndivla facilisi. Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere cubilia Curae; Ndivlam quis porttitor risus. Vestibdivum felis elit, accumsan non divtrices vel, posuere at mi. Integer mollis turpis vitae magna aliquet tincidunt. Donec nec diam eu odio venenatis faucibus. Donec convallis placerat mauris vitae vdivputate. </div>
      </div>
      <div id="tab2" class="hide">
        <div class="readmore">Sed interdum sem id sem ultrices eget tempus sem rhoncus. In ullamcorper elit at tellus cursus vestibulum mattis lacus vulputate. Etiam elit mi, sagittis ut feugiat vitae, suscipit eu nisl. Praesent bibendum tortor quis felis iaculis ac ullamcorper felis vehicula. Nam vitae sem ante, eu consequat nunc. Maecenas et mattis tellus. Vestibulum lacinia mauris eu nulla rutrum interdum. Fusce imperdiet leo ut tortor dapibus id mattis magna elementum. Sed vulputate tristique dapibus. Vivamus semper ullamcorper libero, ac bibendum leo vestibulum auctor. Aliquam tellus enim, bibendum at pretium vitae, porta at mauris. Aliquam erat volutpat. Morbi rutrum elementum felis, vel ullamcorper massa semper ullamcorper. Mauris ut velit lectus. </div>
      </div>
      <div id="tab3" class="hide">
        <div class="readmore">Phasellus porttitor mattis quam, eget sodales sapien cursus et. Etiam elementum volutpat nisi, sit amet hendrerit elit lobortis scelerisque. Donec tincidunt massa nec leo facilisis a sodales risus viverra. Etiam consectetur porttitor adipiscing. Nam id turpis massa. Suspendisse tincidunt, nunc non ultrices consequat, diam erat scelerisque massa, quis porta diam leo in quam. Nam varius, nunc ut luctus viverra, augue leo dapibus risus, et condimentum urna mi vel metus. Quisque pellentesque eleifend eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies vulputate neque eu consequat. Suspendisse vitae felis erat, ultrices sagittis risus. Sed vel nulla tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus urna mauris, volutpat et pharetra id, faucibus eu metus. Vivamus luctus felis in lacus varius non semper turpis ullamcorper. Fusce eleifend mi ut nisl viverra venenatis. </div>
      </div>
      <div id="tab4" class="hide">
        <div class="readmore">Morbi erat magna, ultricies ac semper ac, ornare et nunc. Etiam et lorem ut eros eleifend dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet sodales dolor. Etiam ut nisl at erat vulputate ultrices. Pellentesque dictum dapibus lectus in laoreet. Vestibulum in velit a lacus varius congue a ut felis. Aliquam consectetur, felis ac porta ultrices, sem ipsum tristique metus, quis feugiat massa neque eget odio. Donec sit amet nunc magna. Vestibulum pulvinar pretium dui ut gravida. Suspendisse potenti. In pharetra rhoncus ipsum vel rhoncus. Nulla ut lacus enim. Ut sit amet enim at neque elementum sollicitudin nec a mi. Praesent ultricies, metus malesuada imperdiet rutrum, sapien est pretium urna, et convallis orci orci vitae erat. Vivamus at ligula lacus, nec consequat nibh. </div>
      </div>
    </div>
  </div>
</div>

And this is my jQuery script, where I’ve tried to use both the pluings at a time in a same div

$(document).ready(function() {
    $(function() {
        $("#tab").organicTabs({
            "speed": 250
        });
    });

    $(".readmore").each(function() {
        if ($(this).text().length > 200) {
            $(function() {
                $('div.readmore').expander({
                    slicePoint: 200,
                    expandSpeed: 1000,
                    collapseSpeed: 1000,
                    expandText: 'Read More',
                    userCollapseText: 'Hide Text'
                });
            });
        }
    });
});

Using the whole stuff, I’m getting perfect output only for the first tab and that also sometimes.

This is a working fiddle example http://jsfiddle.net/RWnBQ/

Answer 1

You don’t need a doc ready handler here: http://jsfiddle.net/RWnBQ/1/

$(".readmore").each(function () {
    if ($(this).text().length > 200) {
      //--- doc ready removed from here
            $('div.readmore').expander({
                slicePoint: 200,
                expandSpeed: 1000,
                collapseSpeed: 1000,
                expandText: 'Read More',
                userCollapseText: 'Hide Text'
            });
      //--- doc ready removed from here
    }
});